html[data-realm="snake"] { color-scheme: light; }

html[data-realm="snake"] body.snake-account-page {
  --snake-paper: #f8f5ed;
  --snake-paper-deep: #ede7da;
  --snake-ink: #232d35;
  --snake-muted: #56616a;
  --snake-gold: #8b6b35;
  --snake-line: rgba(132, 104, 57, .34);
  --snake-red: #7f2027;
  --snake-red-hover: #9b2d35;
  min-width: 0;
  color: var(--snake-ink);
  background:
    linear-gradient(90deg, rgba(246,243,235,.97), rgba(246,243,235,.9) 58%, rgba(240,237,228,.72)),
    url("art/v3/realms/snake-desktop-bg-v1-1440.webp") center / cover fixed no-repeat;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

html[data-realm="snake"] body.snake-account-page #bg-layer,
html[data-realm="snake"] body.snake-account-page #bg-overlay,
html[data-realm="snake"] body.snake-account-page #particles { display: none; }

html[data-realm="snake"] body.snake-account-page header.nav {
  min-height: 72px;
  padding: 12px 28px 12px 106px;
  border-color: rgba(187, 151, 88, .42);
  background: rgba(25, 29, 31, .96);
  box-shadow: 0 8px 28px rgba(35, 30, 24, .16);
  backdrop-filter: blur(18px) saturate(.7);
}

html[data-realm="snake"] body.snake-account-page header.nav .brand img {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(202, 174, 120, .64);
  filter: sepia(.28) saturate(.72) brightness(1.12);
}

html[data-realm="snake"] body.snake-account-page header.nav .brand .txt .en {
  color: #f0e7d2;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .24em;
}

html[data-realm="snake"] body.snake-account-page header.nav .brand .txt .cn {
  color: #baa985;
  letter-spacing: .16em;
}

html[data-realm="snake"] body.snake-account-page .nav-btn,
html[data-realm="snake"] body.snake-account-page .btn {
  border-color: rgba(202, 174, 120, .46);
  border-radius: 4px;
  color: #f7efe0;
  background: var(--snake-red);
  box-shadow: none;
}

html[data-realm="snake"] body.snake-account-page .nav-btn:hover,
html[data-realm="snake"] body.snake-account-page .btn:hover {
  border-color: rgba(231, 204, 153, .72);
  color: #fff;
  background: var(--snake-red-hover);
  box-shadow: 0 8px 18px rgba(87, 20, 26, .18);
}

html[data-realm="snake"] body.snake-account-page .nav-btn.ghost,
html[data-realm="snake"] body.snake-account-page .btn.btn-ghost {
  border-color: rgba(202, 174, 120, .32);
  color: #d8c8a8;
  background: transparent;
}

html[data-realm="snake"] body.snake-account-page .nav-btn.ghost:hover,
html[data-realm="snake"] body.snake-account-page .btn.btn-ghost:hover {
  border-color: rgba(226, 197, 142, .66);
  color: #fff6e7;
  background: rgba(255,255,255,.05);
}

.snake-account-rail {
  position: fixed;
  z-index: 14;
  top: 94px;
  bottom: 24px;
  left: 22px;
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 22px 10px;
  border: 1px solid rgba(218, 184, 119, .56);
  border-radius: 3px;
  color: #f6e9d0;
  background: linear-gradient(180deg, #8c272a, #6f171e);
  box-shadow: 0 12px 28px rgba(68, 28, 27, .24);
  writing-mode: vertical-rl;
  pointer-events: none;
}

.snake-account-rail::before,
.snake-account-rail::after {
  content: "";
  width: 24px;
  height: 1px;
  margin: 0 0 14px;
  background: rgba(239, 210, 153, .76);
}
.snake-account-rail::after { margin: auto 0 0; }
.snake-account-rail strong { font-size: 21px; font-weight: 600; letter-spacing: .22em; }
.snake-account-rail span { margin-top: 18px; color: #e0c99f; font-size: 11px; letter-spacing: .18em; }

/* Snake profile: archival folio rather than Cassell glass cards. */
html[data-realm="snake"] body.snake-profile-page .pf-wrap {
  width: min(1320px, calc(100% - 158px));
  max-width: none;
  margin: 0 auto;
  padding: 34px 0 92px;
  transform: translateX(36px);
}

html[data-realm="snake"] body.snake-profile-page .pf-banner {
  min-height: 176px;
  padding: 32px 44px 32px 142px;
  overflow: hidden;
  border: 1px solid var(--snake-line);
  border-radius: 4px;
  color: var(--snake-ink);
  background:
    linear-gradient(95deg, rgba(252,250,245,.98), rgba(248,245,237,.93) 64%, rgba(236,232,222,.82)),
    url("art/v3/realms/snake-desktop-bg-v1-1440.webp") right center / cover no-repeat;
  box-shadow: 0 18px 45px rgba(64, 52, 35, .14);
  backdrop-filter: blur(14px) saturate(.72);
}

html[data-realm="snake"] body.snake-profile-page .pf-banner::before {
  content: "身\A份\A卷\A宗";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 34px;
  width: 62px;
  display: grid;
  place-items: center;
  padding: 14px 0;
  border-inline: 1px solid rgba(223, 185, 115, .52);
  color: #f7e9cd;
  background: linear-gradient(180deg, #8d292b, #731a20);
  font-size: 16px;
  line-height: 1.32;
  letter-spacing: .16em;
  text-align: center;
  white-space: pre;
  box-shadow: 8px 0 24px rgba(89, 29, 30, .12);
}

html[data-realm="snake"] body.snake-profile-page .pf-banner .cover {
  opacity: 1;
  background:
    radial-gradient(circle at 78% 24%, rgba(153,120,63,.12), transparent 26%),
    linear-gradient(90deg, transparent 58%, rgba(123,32,39,.035));
}

html[data-realm="snake"] body.snake-profile-page .pf-id .uname {
  color: #202a31;
  font-size: clamp(29px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: .12em;
}

html[data-realm="snake"] body.snake-profile-page .pf-id .sid { color: #59636b; }
html[data-realm="snake"] body.snake-profile-page .pf-id .chip,
html[data-realm="snake"] body.snake-profile-page .pf-id .chip.moon {
  border-color: rgba(139, 107, 53, .36);
  border-radius: 3px;
  color: #654b22;
  background: rgba(255, 252, 244, .72);
}

html[data-realm="snake"] body.snake-profile-page .pf-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(1),
html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(2),
html[data-realm="snake"] body.snake-profile-page #securityCard { grid-column: span 4; }
html[data-realm="snake"] body.snake-profile-page .pf-card.wide { grid-column: 1 / -1; }

html[data-realm="snake"] body.snake-profile-page .pf-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--snake-line);
  border-radius: 4px;
  color: var(--snake-ink);
  background:
    linear-gradient(135deg, transparent 12px, rgba(253,251,246,.96) 0) top left,
    linear-gradient(225deg, transparent 12px, rgba(248,245,237,.96) 0) top right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 12px 30px rgba(66, 55, 38, .09);
  backdrop-filter: blur(14px) saturate(.72);
}

html[data-realm="snake"] body.snake-profile-page .pf-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(151, 120, 65, .12);
  pointer-events: none;
}

html[data-realm="snake"] body.snake-profile-page .pf-card > * { position: relative; z-index: 1; }
html[data-realm="snake"] body.snake-profile-page .pf-card h3 {
  margin-bottom: 20px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(132, 104, 57, .22);
  color: #26313a;
  font-size: 16px;
}
html[data-realm="snake"] body.snake-profile-page .pf-card h3::before {
  content: "◆";
  color: #a98649;
  font-size: 8px;
}
html[data-realm="snake"] body.snake-profile-page .pf-card h3 .en { color: #8b6b35; }
html[data-realm="snake"] body.snake-profile-page .field label,
html[data-realm="snake"] body.snake-profile-page .check-row,
html[data-realm="snake"] body.snake-profile-page .cosmetic-note,
html[data-realm="snake"] body.snake-profile-page .bl-meta { color: var(--snake-muted); }

html[data-realm="snake"] body.snake-profile-page .input,
html[data-realm="snake"] body.snake-profile-page select,
html[data-realm="snake"] body.snake-profile-page textarea,
html[data-realm="snake"] body.snake-profile-page .seg button,
html[data-realm="snake"] body.snake-profile-page .cosmetic-item {
  border-color: rgba(121, 98, 58, .3);
  border-radius: 4px;
  color: #202b33;
  background: rgba(255, 253, 248, .84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-realm="snake"] body.snake-profile-page .input::placeholder,
html[data-realm="snake"] body.snake-profile-page textarea::placeholder { color: #7a8287; }
html[data-realm="snake"] body.snake-profile-page .input:focus,
html[data-realm="snake"] body.snake-profile-page select:focus,
html[data-realm="snake"] body.snake-profile-page textarea:focus {
  border-color: #8c252b;
  box-shadow: 0 0 0 3px rgba(140, 37, 43, .11);
}
html[data-realm="snake"] body.snake-profile-page .readonly { color: #626b70; background: rgba(231, 226, 214, .76); }
html[data-realm="snake"] body.snake-profile-page select option { color: #202b33; background: #f8f5ed; }
html[data-realm="snake"] body.snake-profile-page .seg button.on {
  border-color: #8c252b;
  color: #731b21;
  background: rgba(140, 37, 43, .09);
}
html[data-realm="snake"] body.snake-profile-page .cosmetic-item strong { color: #26313a; }
html[data-realm="snake"] body.snake-profile-page .cosmetic-item p { color: #5c666e; }
html[data-realm="snake"] body.snake-profile-page .cosmetic-state { color: #765622; }
html[data-realm="snake"] body.snake-profile-page .cosmetic-unlock {
  border-color: rgba(127,32,39,.36);
  border-radius: 3px;
  color: #762027;
  background: rgba(127,32,39,.05);
}
html[data-realm="snake"] body.snake-profile-page .security-notice {
  border-color: rgba(127,32,39,.3);
  color: #682329;
  background: rgba(127,32,39,.07);
}
html[data-realm="snake"] body.snake-profile-page .pf-card .btn.btn-ghost,
html[data-realm="snake"] body.snake-mail-page .compose .nav-btn.ghost {
  border-color: rgba(127,32,39,.32);
  color: #742129;
  background: rgba(127,32,39,.045);
}
html[data-realm="snake"] body.snake-profile-page .pf-card .btn.btn-ghost:hover,
html[data-realm="snake"] body.snake-mail-page .compose .nav-btn.ghost:hover {
  border-color: rgba(127,32,39,.58);
  color: #5f171d;
  background: rgba(127,32,39,.09);
}
html[data-realm="snake"] body.snake-profile-page .bl-meta b { color: #6f1f27; }
html[data-realm="snake"] body.snake-profile-page .save-msg.ok { color: #266942; }
html[data-realm="snake"] body.snake-profile-page .save-msg.err { color: #9a2d33; }
html[data-realm="snake"] body.snake-profile-page .spirit-icon-frame {
  border-color: rgba(151,120,65,.42);
  background: #eee8dc;
  box-shadow: 0 14px 28px rgba(70,55,32,.16);
}

/* Snake mail: bound washi correspondence archive. */
html[data-realm="snake"] body.snake-mail-page .mail-wrap {
  width: min(1320px, calc(100% - 158px));
  max-width: none;
  margin: 0 auto;
  padding: 30px 0 80px;
  transform: translateX(36px);
}
html[data-realm="snake"] body.snake-mail-page .mail-head {
  margin-bottom: 20px;
  text-align: left;
}
html[data-realm="snake"] body.snake-mail-page .mail-head .en { color: #765622; letter-spacing: .34em; }
html[data-realm="snake"] body.snake-mail-page .mail-head h1 {
  margin: 8px 0 6px;
  color: #202b33;
  font-size: 34px;
  text-indent: 0;
  letter-spacing: .22em;
}
html[data-realm="snake"] body.snake-mail-page .mail-head .sub { color: #56616a; }
html[data-realm="snake"] body.snake-mail-page .mailbox { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
html[data-realm="snake"] body.snake-mail-page .sidebar,
html[data-realm="snake"] body.snake-mail-page .panel {
  border: 1px solid var(--snake-line);
  border-radius: 4px;
  color: var(--snake-ink);
  background: rgba(249, 246, 238, .93);
  box-shadow: 0 14px 35px rgba(66, 55, 38, .12);
  backdrop-filter: blur(16px) saturate(.72);
}
html[data-realm="snake"] body.snake-mail-page .sidebar { padding: 14px; }
html[data-realm="snake"] body.snake-mail-page .compose-btn {
  border-color: rgba(150,118,61,.48);
  border-radius: 3px;
  color: #fff6e7;
  background: linear-gradient(135deg, #8c272d, #711820);
}
html[data-realm="snake"] body.snake-mail-page .compose-btn:hover { background: #9a3037; box-shadow: 0 9px 20px rgba(92,24,30,.18); }
html[data-realm="snake"] body.snake-mail-page .folder {
  border: 1px solid transparent;
  border-radius: 3px;
  color: #4d5962;
}
html[data-realm="snake"] body.snake-mail-page .folder:hover { color: #6f1f27; background: rgba(127,32,39,.05); }
html[data-realm="snake"] body.snake-mail-page .folder.active {
  border-color: rgba(139,107,53,.24);
  color: #6f1f27;
  background: rgba(255,253,248,.86);
  box-shadow: 0 5px 14px rgba(70,55,32,.07);
}
html[data-realm="snake"] body.snake-mail-page .folder .badge { color: #fff; background: #962a31; }
html[data-realm="snake"] body.snake-mail-page .panel { min-height: 590px; }
html[data-realm="snake"] body.snake-mail-page .panel-head {
  padding: 18px 22px;
  border-color: rgba(132,104,57,.22);
  background: rgba(255,253,248,.56);
}
html[data-realm="snake"] body.snake-mail-page .panel-head .ptitle { color: #253039; }
html[data-realm="snake"] body.snake-mail-page .panel-head .pcount { color: #626c73; }
html[data-realm="snake"] body.snake-mail-page .mail-list { max-height: 660px; padding: 14px; }
html[data-realm="snake"] body.snake-mail-page .mail-item {
  min-height: 94px;
  margin-bottom: 10px;
  padding: 18px 18px 18px 44px;
  border: 1px solid rgba(142,112,62,.24);
  border-radius: 2px;
  color: #253039;
  background:
    linear-gradient(90deg, rgba(127,32,39,.025), transparent 22%),
    rgba(255, 253, 248, .84);
  box-shadow: 0 5px 13px rgba(70,55,32,.07);
}
html[data-realm="snake"] body.snake-mail-page .mail-item::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 27px;
  width: 1px;
  background: rgba(127,32,39,.22);
}
html[data-realm="snake"] body.snake-mail-page .mail-item:hover {
  border-color: rgba(127,32,39,.4);
  background-color: #fffdf8;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(70,55,32,.12);
}
html[data-realm="snake"] body.snake-mail-page .mail-item.unread::before {
  content: "未";
  z-index: 2;
  left: 15px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid #a73b3f;
  border-radius: 50%;
  color: #fff5e7;
  background: #8f242b;
  box-shadow: 0 3px 8px rgba(92,24,30,.2);
  font-size: 9px;
}
html[data-realm="snake"] body.snake-mail-page .mail-item .mi-from,
html[data-realm="snake"] body.snake-mail-page .mail-item.unread .mi-from { color: #5d4724; }
html[data-realm="snake"] body.snake-mail-page .mail-item .mi-subject,
html[data-realm="snake"] body.snake-mail-page .mail-item.unread .mi-subject { color: #202b33; }
html[data-realm="snake"] body.snake-mail-page .mail-item .mi-preview,
html[data-realm="snake"] body.snake-mail-page .mail-item .mi-time { color: #626c73; }
html[data-realm="snake"] body.snake-mail-page .reader,
html[data-realm="snake"] body.snake-mail-page .compose {
  min-height: 520px;
  padding: 36px 46px;
  color: #26313a;
  background:
    linear-gradient(rgba(255,253,248,.88), rgba(255,253,248,.88)),
    url("art/v3/realms/snake-desktop-bg-v1-1440.webp") right bottom / cover no-repeat;
}
html[data-realm="snake"] body.snake-mail-page .reader .back { color: #6f1f27; }
html[data-realm="snake"] body.snake-mail-page .reader .r-subject { color: #3a2f24; }
html[data-realm="snake"] body.snake-mail-page .reader .r-meta { border-color: rgba(132,104,57,.25); }
html[data-realm="snake"] body.snake-mail-page .reader .r-from { color: #6d5228; }
html[data-realm="snake"] body.snake-mail-page .reader .r-addr,
html[data-realm="snake"] body.snake-mail-page .reader .r-time { color: #626c73; }
html[data-realm="snake"] body.snake-mail-page .reader .r-content { color: #2b353c; }
html[data-realm="snake"] body.snake-mail-page .compose label { color: #5e4825; }
html[data-realm="snake"] body.snake-mail-page .compose .input,
html[data-realm="snake"] body.snake-mail-page .compose textarea {
  border-color: rgba(121,98,58,.32);
  border-radius: 3px;
  color: #202b33;
  background: rgba(255,253,248,.88);
}
html[data-realm="snake"] body.snake-mail-page .compose .input:focus,
html[data-realm="snake"] body.snake-mail-page .compose textarea:focus {
  border-color: #8c252b;
  box-shadow: 0 0 0 3px rgba(140,37,43,.1);
}
html[data-realm="snake"] body.snake-mail-page .compose .input::placeholder,
html[data-realm="snake"] body.snake-mail-page .compose textarea::placeholder { color: #7c8388; }
html[data-realm="snake"] body.snake-mail-page .empty { color: #626c73; }
html[data-realm="snake"] body.snake-mail-page .empty .et { color: #303b43; }

@keyframes snake-folio-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-realm="snake"] body.snake-profile-page .pf-banner,
html[data-realm="snake"] body.snake-profile-page .pf-card,
html[data-realm="snake"] body.snake-mail-page .mail-head,
html[data-realm="snake"] body.snake-mail-page .mailbox {
  animation: snake-folio-in .58s cubic-bezier(.2,.72,.2,1) both;
}
html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(2),
html[data-realm="snake"] body.snake-mail-page .mailbox { animation-delay: 70ms; }
html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(n+3) { animation-delay: 120ms; }

@media (max-width: 1100px) {
  html[data-realm="snake"] body.snake-profile-page .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(1),
  html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(2) { grid-column: span 1; }
  html[data-realm="snake"] body.snake-profile-page #securityCard,
  html[data-realm="snake"] body.snake-profile-page .pf-card.wide { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  html[data-realm="snake"] body.snake-account-page {
    background:
      linear-gradient(rgba(248,245,237,.9), rgba(246,242,233,.94)),
      url("art/v3/realms/snake-mobile-bg-v1-390.webp") center top / cover fixed no-repeat;
  }
  .snake-account-rail { display: none; }
  html[data-realm="snake"] body.snake-account-page header.nav {
    min-height: 64px;
    padding: calc(9px + env(safe-area-inset-top)) 13px 9px;
  }
  html[data-realm="snake"] body.snake-account-page header.nav .brand img { width: 36px; height: 36px; }
  html[data-realm="snake"] body.snake-account-page header.nav .brand .txt .en { font-size: 13px; letter-spacing: .14em; }
  html[data-realm="snake"] body.snake-account-page header.nav .brand .txt .cn { display: none; }
  html[data-realm="snake"] body.snake-account-page header.nav .actions { gap: 6px; }
  html[data-realm="snake"] body.snake-account-page .nav-btn { min-height: 42px; padding: 8px 12px; }

  html[data-realm="snake"] body.snake-profile-page .pf-wrap,
  html[data-realm="snake"] body.snake-mail-page .mail-wrap {
    width: auto;
    margin: 0;
    padding: 18px 12px calc(42px + env(safe-area-inset-bottom));
    transform: none;
  }
  html[data-realm="snake"] body.snake-profile-page .pf-banner {
    min-height: 178px;
    padding: 22px 16px 22px 80px;
    align-items: flex-start;
    text-align: left;
  }
  html[data-realm="snake"] body.snake-profile-page .pf-banner::before { left: 16px; width: 48px; font-size: 13px; }
  html[data-realm="snake"] body.snake-profile-page .pf-id .uname { font-size: 28px; }
  html[data-realm="snake"] body.snake-profile-page .pf-id .chips { gap: 6px; }
  html[data-realm="snake"] body.snake-profile-page .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(1),
  html[data-realm="snake"] body.snake-profile-page .pf-card:nth-child(2),
  html[data-realm="snake"] body.snake-profile-page #securityCard,
  html[data-realm="snake"] body.snake-profile-page .pf-card.wide { grid-column: auto; }
  html[data-realm="snake"] body.snake-profile-page .pf-card { padding: 19px 16px; }
  html[data-realm="snake"] body.snake-profile-page .save-row {
    position: sticky;
    z-index: 8;
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 10px;
    border: 1px solid var(--snake-line);
    border-radius: 4px;
    background: rgba(248,245,237,.94);
    box-shadow: 0 10px 28px rgba(61,49,32,.18);
    backdrop-filter: blur(12px);
  }
  html[data-realm="snake"] body.snake-profile-page .save-row .btn { min-height: 48px; }

  html[data-realm="snake"] body.snake-mail-page .mail-head { margin: 2px 4px 16px; }
  html[data-realm="snake"] body.snake-mail-page .mail-head .en { font-size: 9px; letter-spacing: .24em; }
  html[data-realm="snake"] body.snake-mail-page .mail-head h1 { font-size: 27px; letter-spacing: .17em; }
  html[data-realm="snake"] body.snake-mail-page .mail-head .sub { font-size: 11px; line-height: 1.65; }
  html[data-realm="snake"] body.snake-mail-page .mailbox { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html[data-realm="snake"] body.snake-mail-page .sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
  }
  html[data-realm="snake"] body.snake-mail-page .compose-btn { grid-column: 1 / -1; min-height: 46px; margin: 0; }
  html[data-realm="snake"] body.snake-mail-page .folder { justify-content: center; min-height: 44px; margin: 0; }
  html[data-realm="snake"] body.snake-mail-page .panel { min-height: 470px; }
  html[data-realm="snake"] body.snake-mail-page .panel-head { padding: 14px 15px; }
  html[data-realm="snake"] body.snake-mail-page .mail-list { max-height: none; padding: 10px; }
  html[data-realm="snake"] body.snake-mail-page .mail-item { min-height: 104px; padding: 16px 14px 16px 42px; }
  html[data-realm="snake"] body.snake-mail-page .mail-item .mi-top { align-items: flex-start; }
  html[data-realm="snake"] body.snake-mail-page .reader,
  html[data-realm="snake"] body.snake-mail-page .compose { min-height: 430px; padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-realm="snake"] body.snake-profile-page .pf-banner,
  html[data-realm="snake"] body.snake-profile-page .pf-card,
  html[data-realm="snake"] body.snake-mail-page .mail-head,
  html[data-realm="snake"] body.snake-mail-page .mailbox { animation: none; }
}