/* ===== Fonts ===== */

@font-face {
  font-family: "PADD Condensed";
  src: url("../fonts/PADDCondensed-Bold.woff") format("woff");
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: "PADD Condensed";
  src: url("../fonts/PADDCondensed-Regular.woff") format("woff");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "PADD Condensed";
  src: url("../fonts/PADDCondensed-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: "PADD Condensed Narrow";
  src: url("../fonts/PADDCondensedNarrow-SemiBold.woff") format("woff");
  font-weight: 600 900;
  font-display: block;
}
@font-face {
  font-family: "PADD Condensed Narrow";
  src: url("../fonts/PADDCondensedNarrow-Regular.woff") format("woff");
  font-weight: 100 599;
  font-display: block;
}
@font-face {
  font-family: "PADD Condensed Compressed";
  src: url("../fonts/PADDCondensedCompressed-SemiBold.woff") format("woff");
  font-weight: 100 900;
  font-display: block;
}
:root {
  --font-lcars: "PADD Condensed", "Antonio", sans-serif;
  --track-text: -0.003em;
  --track-title: -0.006em;
  --track-label: -0.01em;
  --track-number: -0.012em;
}

/* ===== Colors, sizes and styles ===== */

:root {
  --lc-orange: #ff9c00;
  --lc-peach: #ffcc99;
  --lc-butter: #ffff9c;
  --lc-red: #cd6363;
  --lc-lilac: #cc99cc;
  --lc-sky: #99ccff;
  --lc-rust: #ac4e31;
  --c-black: #000000;
  --c-lilac: var(--lc-lilac);
  --c-peach: var(--lc-peach);
  --c-not-followed: #9e9ca9;
  --c-periwinkle: #9999cc;
  --c-orange: var(--lc-orange);
  --c-red: var(--lc-red);
  --c-gold: #f7ce76;
  --c-tangerine: #eb9d4e;
  --c-pink: #c06c97;
  --c-rust: var(--lc-rust);
  --c-blue-dark: #3d4f9e;
  --c-blue: #6f87c0;
  --c-blue-light: var(--lc-sky);
  --c-gray: #adabb8;
  --c-gray-dim: #9e9caa;
  --c-panel-plum: #2f2435;
  --c-butter: var(--lc-butter);
  --bg: var(--c-black);
  --frame-primary: var(--c-lilac);
  --frame-secondary: var(--c-peach);
  --frame-tertiary: var(--c-periwinkle);
  --button-2: var(--c-tangerine);
  --button-4: var(--c-periwinkle);
  --title: var(--c-orange);
  --header-title: var(--title);
  --number: var(--c-orange);
  --text: var(--c-periwinkle);
  --text-alt: var(--c-peach);
  --text-on-color: var(--c-black);
  --alert: var(--c-red);
  --inactive-dim: var(--c-gray-dim);
  --unable: var(--c-gray-dim);
  --person-1: var(--c-lilac);
  --person-2: var(--c-gold);
  --person-3: var(--c-blue-light);
  --person-4: var(--c-peach);
  --person-5: var(--c-periwinkle);
  --person-6: var(--c-tangerine);
  --person-7: var(--c-blue);
  --font: var(--font-lcars, "PADD Condensed", "Antonio", sans-serif);
  --font-header: "PADD Condensed Narrow", var(--font);
  --font-narrow: "PADD Condensed Narrow", var(--font);
  --type-xs: 13px;
  --type-sm: 20px;
  --type-md: 26px;
  --line: 1;
  --cap-ratio: 0.712;
  --gap: 3px;
  --bar: 17px;
  --button: 64px;
  --inset: 17px;

  --stack-gap: 8px;
  --title-gap: 8px;
  --squish: 0.73;
  --cap-rx: calc(99px * var(--squish));
  --cap-r: var(--cap-rx) 99px;
  --r-pill-x: calc(999px * var(--squish));
  --r-pill: var(--r-pill-x) 999px;
  --header: 64px;
  --sub-col: var(--button);
  --sub-bar: 9px;
  --sub-gap: 7px;
  --panel-id: var(--type-xs);
  --panel-id-weight: 400;
  --margin: 12px;
  --para-gap: 0.7em;
  --sub-top: calc(var(--button) * 1.6);
  --r-sub-outer: 32px;
  --r-sub-inner: 12px;
  --sub-1: var(--c-periwinkle);
  --sub-2: var(--c-pink);
  --sub-3: var(--c-tangerine);
  --sub-4: var(--c-lilac);
  --sub-title: var(--c-lilac);
  --m1-col: calc(var(--header) * 1.55);
  --m1-foot-thin: calc(var(--header) * 0.17);
  --m1-foot-thick: calc(var(--header) * 0.35);
  --m1-bracket: calc(var(--header) * 1.5);
  --r-m1-foot-outer: calc(var(--header) * 0.62);
  --r-m1-foot-inner: calc(var(--header) * 0.55);
  --mo-bank: calc(var(--header) * 3.55);
  --mo-bank-gap: calc(var(--header) * 0.77);
  --mo-side-gap: calc(var(--header) * 0.55);
  --mo-panels: calc(var(--header) * 5.4);
  --mo-end: calc(var(--header) * 0.77);
  --mo-hood: calc(var(--header) * 1.38);
  --mo-foot: calc(var(--header) * 1.46);
  --r-mo-hood: calc(var(--header) * 0.9);
  --r-mo-step: calc(var(--header) * 0.3);
}
:root {
  --header: 40px;
}
[data-theme="warm"] {
  --frame-primary: #d9a470;
  --frame-secondary: #fbf39d;
  --frame-tertiary: #b799c8;
  --button-2: #d9a470;
  --button-4: #946c9c;
  --title: var(--c-orange);
  --number: #fccc64;
  --text: #b799c8;
  --text-alt: #ebe6be;
  --alert: #dd6644;
  --sub-1: #946c9c;
  --sub-2: #dd6644;
  --sub-3: #fccc64;
  --sub-4: #b799c8;
  --sub-title: #b799c8;
  --person-1: #d9a470;
  --person-2: #fbf39d;
  --person-3: #b799c8;
  --person-4: #fccc64;
  --person-5: #ebe6be;
  --person-6: #dd6644;
  --person-7: #d9a470;
}
[data-theme="msd"] {
  --frame-primary: var(--c-orange);
  --frame-secondary: #ee9955;
  --frame-tertiary: var(--c-periwinkle);
  --button-2: #ee9955;
  --button-4: var(--c-periwinkle);
  --alert: #dd6644;
  --header-title: var(--c-gold);
  --person-1: #ff9900;
  --person-2: #ee9955;
  --person-3: #9999cc;
  --person-4: #ffce69;
  --person-5: #cc98c5;
  --person-6: #6688cc;
  --person-7: #f7ce76;
}
[data-theme="picard"] {
  --frame-primary: #6d748c;
  --frame-secondary: #9ea5ba;
  --frame-tertiary: #d2d5df;
  --button-2: #e7442a;
  --button-4: #37a6d1;
  --title: #ff977b;
  --number: #ff6753;
  --text: #9ea5ba;
  --text-alt: #d2d5df;
  --alert: #e7442a;
  --unable: #6d748c;
  --sub-1: #6d748c;
  --sub-2: #e7442a;
  --sub-3: #37a6d1;
  --sub-4: #9ea5ba;
  --sub-title: #d2d5df;
  --person-1: #37a6d1;
  --person-2: #41c4f7;
  --person-3: #ff977b;
  --person-4: #ff6753;
  --person-5: #e7442a;
  --person-6: #f3f4f7;
  --person-7: #d2d5df;
}
[data-theme="nemesis"] {
  --frame-primary: #6699ff;
  --frame-secondary: #88bbff;
  --frame-tertiary: #d1a16c;
  --button-2: #ff8833;
  --button-4: #6699ff;
  --title: #ff8833;
  --number: #ffcc99;
  --text: #6699ff;
  --text-alt: #ffcc99;
  --alert: #da2537;
  --sub-1: #6699ff;
  --sub-2: #cc6666;
  --sub-3: #ff8833;
  --sub-4: #88bbff;
  --sub-title: #88bbff;
  --person-1: #6699ff;
  --person-2: #88bbff;
  --person-3: #ffcc99;
  --person-4: #ff8833;
  --person-5: #d1a16c;
  --person-6: #cc6666;
  --person-7: #99cc33;
}
[data-theme="lowerdecks"] {
  --frame-primary: #ffaa44;
  --frame-secondary: #ffcc99;
  --frame-tertiary: #ff9911;
  --button-2: #ff9911;
  --button-4: #ffaa44;
  --title: #ff9911;
  --number: #ff7700;
  --text: #ffcc99;
  --text-alt: #ffeecc;
  --alert: #ff4400;
  --sub-1: #cc5500;
  --sub-2: #ff4400;
  --sub-3: #ffeecc;
  --sub-4: #ffcc99;
  --sub-title: #ffcc99;
  --person-1: #ffeecc;
  --person-2: #ff9911;
  --person-3: #ffaa44;
  --person-4: #ffcc99;
  --person-5: #ff7700;
  --person-6: #ff4400;
  --person-7: #cc5500;
}
[data-theme="ldpadd"] {
  --frame-primary: #7799dd;
  --frame-secondary: #99ccff;
  --frame-tertiary: #5588ee;
  --button-2: #88eeff;
  --button-4: #99ccff;
  --title: #88eeff;
  --number: #f3f3fc;
  --text: #99ccff;
  --text-alt: #f3f3fc;
  --alert: #ff3500;
  --sub-1: #5588ee;
  --sub-2: #ff3500;
  --sub-3: #88eeff;
  --sub-4: #66ccff;
  --sub-title: #99ccff;
  --person-1: #5588ee;
  --person-2: #66ccff;
  --person-3: #99ccff;
  --person-4: #7799dd;
  --person-5: #88eeff;
  --person-6: #f3f3fc;
  --person-7: #ff3500;
}
[data-theme="voyager"] {
  --frame-primary: #828cad;
  --frame-secondary: #bec2cf;
  --frame-tertiary: #cc9966;
  --button-2: #fb9004;
  --button-4: #55a7ff;
  --title: #fb9004;
  --number: #ffbb33;
  --text: #99ccff;
  --text-alt: #ffe1ca;
  --alert: #ff3300;
  --sub-1: #2288ff;
  --sub-2: #e98181;
  --sub-3: #ffbb33;
  --sub-4: #99ccff;
  --sub-title: #99ccff;
  --person-1: #ffbb33;
  --person-2: #fb9004;
  --person-3: #70b5ff;
  --person-4: #55a7ff;
  --person-5: #e98181;
  --person-6: #94b300;
  --person-7: #99ccff;
}
html {
  background: var(--bg);
  color: var(--text);
}
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
}
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.bar-text {
  --h: var(--bar);
  font-size: calc(var(--h) / var(--cap-ratio));
  line-height: var(--h);
  height: var(--h);
  white-space: nowrap;
  padding: 0 var(--gap);
}
[data-anchor="right"] {
  direction: rtl;
}
[data-anchor="right"] * {
  unicode-bidi: plaintext;
}
[data-anchor="right"] p {
  text-align: right;
}
button.bt-l:not(#_) {
  font-family: var(--font-narrow);
  font-weight: 400;
}
button.bt-s:not(#_) {
  font-family: var(--font);
  font-weight: 600;
}
:is(.bt-l, .bt-s) :is(b, strong):not(#_) {
  font-weight: inherit;
}
:is(.bt-l, .bt-s) .bt-num:not(#_) {
  font-family: var(--font);
  font-weight: 700;
}
html,
body {
  touch-action: manipulation;
}
:is(button, [role="button"]):is(:disabled, [aria-disabled="true"]) {
  background: var(--unable) !important;
  cursor: default !important;
  opacity: 1 !important;
  filter: none !important;
}
.bar-divider {
  --b: var(--sub-bar);
  --l: 2px;
  --o: 2px;
  position: relative;
  width: calc(var(--b) * 7.3);
  margin-block: calc(-1 * (var(--l) + var(--o)));
  --div-color: var(--sub-4);
}
.bar-divider > i {
  position: absolute;
  display: block;
}
.bar-divider .cut {
  top: calc(var(--l) + var(--o));
  bottom: calc(var(--l) + var(--o));
  background: var(--bg);
}
.bar-divider .cut.a {
  inset-inline-end: 0;
  width: calc(var(--b) * 0.33);
}
.bar-divider .cut.b {
  inset-inline-end: calc(var(--b) * 1.88);
  width: calc(var(--b) * 0.22);
}
.bar-divider .line {
  inset-inline-end: calc(var(--b) * 2.1);
  width: calc(var(--b) * 5.2);
  height: var(--l);
  background: var(--div-color);
}
.bar-divider .line.t {
  top: 0;
}
.bar-divider .line.b {
  bottom: 0;
}
.bar-divider .box {
  inset-inline-end: calc(var(--b) * 2.1);
  width: calc(var(--b) * 5);
  background: var(--bg);
  top: calc(var(--l) + var(--o) + var(--b) * 0.58);
  bottom: calc(var(--l) + var(--o) + var(--b) * 0.58);
  border-start-start-radius: calc(var(--b) * 0.45);
  border-end-start-radius: calc(var(--b) * 0.45);
}
.bar-divider .node {
  inset-inline-end: calc(var(--b) * 2.22);
  top: 50%;
  width: calc(var(--b) * 1.2);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--div-color);
}
.cascade {
  display: grid;
  grid-template-columns: repeat(var(--cc, 5), auto);
  column-gap: 0.7em;
  row-gap: 0.12em;
  justify-content: space-between;
  align-content: end;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-size: 10.88px;
  line-height: 1.1;
  letter-spacing: var(--track-number);
  white-space: nowrap;
  color: var(--cascade, var(--c-orange));
  text-align: end;
}
.subframe .cascade {
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
  align-self: stretch;
  margin-block: 6px var(--cascade-below, 12px);
  margin-inline-end: calc(var(--r-sub-inner) + var(--inset));
}
.para-gap {
  display: block;
  height: var(--para-gap);
}

/* ===== Shared pieces ===== */

.mail-sticky {
  position: sticky;
  top: calc(-1 * var(--scroll-pad, 0px));
  z-index: 3;
  background: var(--bg);
  padding-bottom: 8px;
  box-shadow: 0 -3px 0 var(--bg);
  margin-top: calc(-1 * var(--scroll-pad, 0px));
  padding-top: var(--scroll-pad, 0px);
}
.mail-error {
  color: var(--alert);
  font-size: var(--type-sm);
}
.mail-error:empty {
  display: none;
}
.mh-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-height: 28px;
}
.mh-lab {
  flex: none;
  width: max(84px, calc(var(--header) * 1.6));
  background: var(--frame-secondary);
  color: var(--text-on-color);
  font-style: normal;
  font-size: var(--type-xs);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 6px 3px;
  box-sizing: border-box;
}
#shared > [hidden] {
  display: none !important;
}
.mh-lab {
  width: 72px;
}
.compose {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-top: 6px;
}
.cf-row {
  align-items: stretch;
}
.cf {
  font: inherit;
  text-transform: none;
  letter-spacing: var(--track-text);
  color: var(--c-peach);
  background: #120e16;
  border: 0;
  border-radius: 0;
  outline: 2px solid transparent;
  outline-offset: -2px;
  box-sizing: border-box;
}
.cf:focus {
  outline-color: var(--title);
}
input.cf {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  font-size: 20px;
}
.cf-hint {
  color: var(--text);
  font-size: var(--type-xs);
  text-transform: none;
}
.compose .mh-lab {
  min-height: 36px;
}
@media (pointer: coarse) {
  html,
  body {
    overscroll-behavior-x: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .compose textarea.cf {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  .compose textarea.cf::-webkit-scrollbar {
    width: 21px;
  }
  .compose textarea.cf::-webkit-scrollbar-track {
    background: transparent;
  }
  .compose textarea.cf::-webkit-scrollbar-thumb {
    background: var(--frame-tertiary);
    border-radius: 5px;
    border: 0 solid transparent;
    border-left-width: 1px;
    border-right-width: 10px;
    background-clip: padding-box;
  }
  .mo[data-anchor="right"] .compose textarea.cf::-webkit-scrollbar-thumb {
    border-left-width: 10px;
    border-right-width: 1px;
  }
  .compose textarea.cf::-webkit-scrollbar-corner {
    background: transparent;
  }
  .compose textarea.cf::-webkit-scrollbar-button:single-button:vertical {
    display: block;
    height: 12px;
    background: no-repeat 2px center / 8px 6px;
  }
  .mo[data-anchor="right"] .compose textarea.cf::-webkit-scrollbar-button:single-button:vertical {
    background-position: 11px center;
  }
  .compose textarea.cf::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M4 0 8 6H0z' fill='%239999CC'/%3E%3C/svg%3E");
  }
  .compose textarea.cf::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0h8L4 6z' fill='%239999CC'/%3E%3C/svg%3E");
  }
}

/* ===== Bluesky Styles ===== */

.bsky-view {
  text-transform: none;
}
.bsky-sticky {
  padding-bottom: 10px;
}
.mail-sticky.bsky-sticky {
  top: calc(-1px - var(--scroll-pad, 0px));
  margin-top: calc(-1px - var(--scroll-pad, 0px));
  padding-top: calc(var(--scroll-pad, 0px) + 1px);
}
.bsky-h {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 22px;
}
.bsky-h .bs-cap {
  width: 16px;
  height: 100%;
  background: var(--c-peach);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  flex: none;
}
.bsky-h .bs-lab {
  color: var(--title);
  font-size: calc(22px / var(--cap-ratio));
  line-height: 22px;
  height: 22px;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  padding: 0 6px;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsky-h .bs-rule {
  min-width: 12px;
}
.bsky-h .bs-rule {
  flex: 1;
  height: 100%;
  background: var(--frame-tertiary);
}
.bsky-h .bs-refresh {
  flex: none;
  height: 100%;
  padding: 0 12px 0 10px;
  border: 0;
  background: var(--button-4);
  color: var(--text-on-color);
  font: inherit;
  font-size: 15px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding-bottom: 0;
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  cursor: pointer;
}
.bsky-h .bs-home {
  flex: none;
  height: 100%;
  padding: 0 10px 2px;
  border: 0;
  background: var(--c-lilac);
  color: var(--text-on-color);
  font: inherit;
  font-size: 15px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.bsky-h .bs-unonly {
  flex: none;
  height: 100%;
  padding: 0 10px 2px;
  border: 0;
  background: var(--button-4);
  color: var(--text-on-color);
  font: inherit;
  font-size: 15px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  white-space: nowrap;
}
.bsky-h .bs-unonly[hidden] {
  display: none;
}
.bsky-h .bs-unonly[aria-pressed="true"] {
  background: var(--button-2);
}
.bsky-note {
  color: var(--title);
  font-size: var(--type-sm);
  margin-top: 8px;
}
.bsky-note:empty {
  display: none;
}

.bsky-feed {
  --feed-gap: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--feed-gap);
}
.bs-post {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 10px;
}
.bs-post .bs-side {
  background: var(--pc, var(--c-lilac));
  border-start-start-radius: 5px;
  border-end-start-radius: 5px;
}
.bs-post .bs-main {
  min-width: 0;
}
.bs-why {
  color: var(--text);
  font-size: 14px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bs-why b {
  color: var(--c-gold);
  font-weight: inherit;
  margin-inline-start: 0.3em;
}
.bs-who {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-width: 0;
  height: 35px;
}
.bs-name {
  --av: 28px;
  height: 100%;
  box-sizing: border-box;
  background: var(--pc, var(--c-lilac));
  color: var(--text-on-color);
  border-radius: var(--cap-rx) / 99px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 3px;
  padding-inline: 4px 15px;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 19px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 62%;
}
.bs-av {
  flex: none;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  background: var(--c-black);
  overflow: hidden;
  display: block;
}
.bs-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding-top: 2px;
}
.bs-handle {
  color: var(--text);
  font-size: 19px;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
  min-width: 0;
}
.bs-when {
  color: var(--c-gold);
  font-size: 19px;
  align-self: center;
  letter-spacing: var(--track-number);
  flex: none;
}
.bs-txt {
  color: var(--title);
  font-size: calc(22px + var(--ts-bsky, 0px));
  line-height: 1.3;
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bs-txt {
  font-size: calc(21px + var(--ts-bsky, 0px));
}
.bs-txt:empty {
  display: none;
}
.bs-txt a {
  text-decoration: none;
  cursor: pointer;
}
.bs-txt a.bs-link {
  color: var(--c-butter);
}
.bs-txt a.bs-mention {
  color: var(--c-blue-light);
}
.bs-txt a.bs-tag {
  color: var(--c-lilac);
}
.bs-media {
  margin-top: 8px;
  max-width: 460px;
}
.bs-imgs {
  display: grid;
  gap: var(--gap);
}
.bs-imgs.n2,
.bs-imgs.n3,
.bs-imgs.n4 {
  grid-template-columns: 1fr 1fr;
}
.bs-imgs button {
  padding: 0;
  border: 0;
  background: var(--c-panel-plum);
  cursor: zoom-in;
  display: block;
  min-width: 0;
  overflow: hidden;
}
.bs-imgs img {
  display: block;
  width: 100%;
  height: auto;
}
.bs-imgs.n1 button {
  background: none;
}
.bs-imgs.n1 img {
  max-height: 520px;
  object-fit: contain;
}
.bs-imgs:not(.n1) img {
  aspect-ratio: 1;
  object-fit: cover;
  height: 100%;
}
.bs-imgs.n3 button:first-child {
  grid-row: span 2;
}
.bs-imgs.n3 button:first-child img {
  aspect-ratio: auto;
}
.bs-imgs button:last-child {
  border-end-end-radius: 14px;
}
.bs-imgs.n1 button {
  border-start-end-radius: 14px;
}
.bs-video {
  position: relative;
}
.bs-video .bs-vtag {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  background: var(--c-orange);
  color: var(--text-on-color);
  font-size: 14px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 3px 10px 1px;
  border-radius: var(--cap-rx) / 99px;
}
.bs-cover {
  display: flex;
  align-items: stretch;
  gap: 3px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}
.bs-cover i {
  flex: none;
  width: 8px;
  align-self: stretch;
  background: var(--c-red);
  border-radius: 0;
}
.bs-media:not(.covered) > .bs-cover {
  margin-bottom: 8px;
}
.bs-media:not(.covered) > .bs-cover :is(i, span) {
  background: var(--c-orange);
}
.bs-cover span {
  min-height: 30px;
  display: flex;
  align-items: flex-end;
  padding: 0 12px 3px 8px;
  background: var(--c-red);
  color: var(--text-on-color);
  font-size: 15px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-media.covered > :not(.bs-cover) {
  display: none;
}
.bs-card {
  display: block;
  margin-top: 8px;
  border: 0;
  border-inline-start: 6px solid var(--c-butter);
  padding: 4px 0 4px 10px;
  max-width: 460px;
  background: none;
  text-align: start;
  font: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.bs-card b {
  display: block;
  color: var(--c-butter);
  font-weight: inherit;
  font-size: 18px;
  line-height: 1.25;
}
.bs-card .d {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bs-card .h {
  display: block;
  color: var(--c-butter);
  opacity: 0.75;
  font-size: 14px;
  margin-top: 2px;
  letter-spacing: var(--track-label);
}
.bs-quote {
  display: block;
  margin-top: 8px;
  border: 2px solid var(--frame-tertiary);
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  padding: 6px 10px;
  background: none;
  text-align: start;
  font: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  max-width: 460px;
}
.bs-quote .bs-q-who b {
  font-weight: inherit;
}
.bs-quote .bs-q-who {
  color: var(--c-peach);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.bs-quote .bs-q-txt {
  color: var(--c-peach);
  font-size: 17px;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bs-quote .bs-q-txt {
  font-size: 19px;
}
.bs-quote .bs-q-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}
.bs-quote .bs-q-img {
  display: block;
  max-width: 200px;
  max-height: 160px;
}
.bs-quote .bs-q-img[data-full] {
  cursor: zoom-in;
}
.bs-quote.gone {
  color: var(--text);
  font-size: 15px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: default;
}
.bs-acts {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--gap);
  margin-top: 12px;
  height: 21px;
}
.bs-acts > * {
  flex: none;
}
.bs-acap {
  width: 13px;
  background: var(--c-blue);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
}
.bs-asep {
  width: 8px;
  background: var(--c-blue-light);
}
.bs-n {
  --h: 21px;
  color: var(--text);
  font-size: calc(var(--h) / var(--cap-ratio));
  line-height: var(--h);
  letter-spacing: var(--track-number);
  padding-inline: 2px 0;
}
.bs-n {
  transform: translateY(-0.75px);
}
.bs-acts button {
  border: 0;
  padding: 0;
  font: inherit;
  background: none;
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  cursor: pointer;
}
.bs-al {
  background: var(--c-blue);
  color: var(--text-on-color);
  font-size: 16px;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0 4px 1px;
  display: flex;
  align-items: flex-end;
}
.bs-acts button[aria-pressed="true"] .bs-al {
  background: var(--title);
}
.bs-acts button[aria-pressed="true"] .bs-n {
  color: var(--c-gold);
}
.bs-acts button.busy {
  opacity: 0.6;
}

.bsky-more {
  margin: 18px 0 6px;
  color: var(--text);
  font-size: var(--type-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.bsky-more:empty {
  display: none;
}
.bsky-acct .bs-acct-state,
.bsky-acct .cf-hint {
  text-transform: none;
}
.bsky-acct .bs-acct-state {
  color: var(--text);
  font-size: var(--type-sm);
  line-height: 1.35;
  margin: 0 0 10px;
}
.bsky-acct .bs-acct-state b {
  color: var(--title);
  font-weight: inherit;
}
.bsky-acct .cf-hint {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
  margin: 8px 0 12px;
}
.bsky-acct .mh-row + .mh-row {
  margin-top: 6px;
}
.bsky-acct .mail-error:not(:empty) {
  margin-top: 10px;
}
.bsky-acct .bs-acct-row {
  display: flex;
  gap: var(--gap);
}
.bsky-acct .pill {
  border: 0;
  cursor: pointer;
}
.bsky-acct [hidden] {
  display: none !important;
}
.bs-name[data-go],
.bs-handle[data-go],
.bs-why[data-go] {
  cursor: pointer;
}
.bs-post:not(.bs-focus) .bs-main {
  cursor: pointer;
}
.bs-sub {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 14px;
  margin: 4px 0 -2px;
}
.bs-sub span {
  --h: 14px;
  color: var(--text);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0;
  flex: none;
}
.bs-sub i {
  flex: 1;
  height: 6px;
  background: var(--frame-tertiary);
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
}
.bs-post.bs-focus .bs-txt {
  font-size: calc(26px + var(--ts-bsky, 0px));
}
.bs-stamp {
  color: var(--c-gold);
  font-size: 15px;
  letter-spacing: var(--track-number);
  margin-top: 8px;
  text-transform: uppercase;
}
.bs-post.bs-focus .bs-txt {
  font-size: calc(25px + var(--ts-bsky, 0px));
}
.bsky-top {
  text-transform: none;
  container: bstop / inline-size;
  height: 100%;
}
.bs-pf {
  --nm: 30px;
  --hd: 19px;
  --bar: 26px;
  --fl: 18px;
  --g: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
.bs-pf .bar-text {
  padding: 0;
}
.pf-file {
  --h: var(--fl);
  color: var(--c-gold);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  flex: none;
  white-space: nowrap;
}
.pf-id {
  display: grid;
  grid-template-columns: var(--pic) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: var(--g);
  flex: none;
  --pic: calc(var(--nm) + var(--hd) * 1.2 + var(--bar) + var(--g) * 2);
}
.pf-pic {
  grid-row: 1 / 4;
  width: var(--pic);
  height: var(--pic);
  box-sizing: border-box;
  border: 3px solid var(--c-periwinkle);
  background: var(--c-black);
  overflow: hidden;
  display: block;
}
.pf-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-namerow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: var(--nm);
}
.pf-name {
  --h: var(--nm);
  color: var(--c-periwinkle);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.pf-follows {
  flex: none;
  height: var(--nm);
  display: flex;
  align-items: center;
  padding: 0 14px 0 10px;
  background: var(--c-gold);
  color: var(--text-on-color);
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.pf-handle {
  color: var(--c-periwinkle);
  font-size: var(--hd);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-stats {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  height: var(--bar);
  min-width: 0;
}
.pf-stats > * {
  flex: none;
}
.pf-stats .lab {
  background: var(--c-lilac);
  color: var(--text-on-color);
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 8px 1px;
  min-width: calc(var(--bar) * 2.4);
  box-sizing: border-box;
}
.pf-stats .lab.end {
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: calc(var(--bar) * 0.55);
  justify-content: flex-start;
  min-width: 0;
}
.pf-stats .num {
  --h: var(--bar);
  color: var(--number);
  letter-spacing: var(--track-number);
  padding: 0 2px;
}
.pf-stats .gb {
  width: calc(var(--bar) * 0.32);
  background: var(--c-gold);
}
.pf-stats .gb.gone {
  visibility: hidden;
}
.pf-stats .gb.alt {
  background: var(--alt);
}
.pf-stats .fill {
  flex: 1 1 0;
  min-width: 6px;
  background: var(--c-periwinkle);
}
.bf {
  --b: 18px;
  --w: calc(var(--b) * 2.6);
  --r: var(--b);
  display: grid;
  grid-template-columns: var(--w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.bf-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  height: calc(var(--b) + var(--r));
}
.bf-arm {
  position: relative;
  flex: 1;
  height: 100%;
  background: var(--c-tangerine);
  border-start-start-radius: calc(var(--b) * 1.15);
}
.bf-arm::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--w);
  inset-inline-end: 0;
  top: var(--b);
  bottom: 0;
  background: var(--bg);
  border-start-start-radius: calc(var(--b) * 0.4);
}
.bf-lab {
  --h: var(--b);
  flex: none;
  color: var(--c-gold);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
}
.bf-cap {
  flex: none;
  width: calc(var(--b) * 0.9);
  height: var(--b);
  background: var(--c-tangerine);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bf-side {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-top: var(--gap);
  min-height: 0;
  overflow: hidden;
}
.bf-side > i {
  font-style: normal;
  background: var(--c-peach);
  color: var(--text-on-color);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 6px 2px;
  box-sizing: border-box;
  flex: none;
  height: calc(var(--b) * 2.1);
}
.bf-side > i.b {
  flex: 1 1 auto;
  height: auto;
  min-height: calc(var(--b) * 2.4);
  align-items: flex-start;
  padding: 2px 6px 0;
  border-end-start-radius: calc(var(--b) * 1.2);
}
.bf-text {
  position: relative;
  grid-column: 2;
  min-height: 0;
  overflow: hidden;
  padding-block: 0 4px;
  padding-inline: var(--margin) 0;
  margin-top: calc(var(--margin) - var(--r));
  scrollbar-width: none;
}
.bf-text::-webkit-scrollbar {
  display: none;
}
.mo[data-sized] .bf-text {
  overflow-y: auto;
}
.bf-text .bs-bio {
  font-size: 22px;
  margin: 0;
}
.bf-text .bs-bio:empty::before {
  content: "No biography on file.";
  color: var(--text);
}
.pf-stats .lab .s {
  display: none;
}
.pf-stats.short .lab .l {
  display: none;
}
.pf-stats.short .lab .s {
  display: inline;
}
.pf-stats.tight {
  gap: 2px;
}
.pf-stats.tight .lab {
  padding-inline: 4px;
}
.pf-stats.tight .num {
  padding: 0;
}
@container bstop (max-width: 520px) {
  .bs-pf {
    --nm: 20px;
    --hd: 15px;
    --bar: 18px;
    --fl: 12px;
    --g: 6px;
    gap: 8px;
  }
  .pf-id {
    column-gap: 10px;
  }
  .pf-stats .lab {
    min-width: 0;
    padding: 0 5px 1px;
  }
  .pf-stats .lab.end {
    padding-inline-end: 10px;
  }
  .bf {
    --b: 12px;
  }
  .bf-text .bs-bio {
    font-size: 17px;
  }
}
.mo[data-top] .subframe > .bar-divider {
  z-index: 2;
}
.bs-bio-toggle {
  position: absolute;
  inset-inline-end: calc(var(--b) * 2.1 + var(--b) * 1.6);
  width: calc(var(--b) * 3);
  top: 0;
  bottom: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-bio-toggle i {
  width: 0;
  height: 0;
  border-inline: calc(var(--b) * 0.55) solid transparent;
}
.bs-bio-toggle[aria-expanded="true"] i {
  border-bottom: calc(var(--b) * 0.7) solid var(--c-gold);
}
.bs-bio-toggle[aria-expanded="false"] i {
  border-top: calc(var(--b) * 0.7) solid var(--c-gold);
}
.mo[data-bio="hidden"] .bsky-top .bf {
  display: none;
}
.mo[data-sized] .subframe > .mo-top {
  overflow: hidden;
  min-height: 0;
}
.bs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.bs-lightbox[hidden] {
  display: none;
}
[data-anchor="right"] .bs-lightbox {
  direction: rtl;
}
.lb-wrap {
  --lh: 14px;
  --lf: 30px;
  width: min(100%, 760px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}
.lb-title {
  flex: none;
  color: var(--c-peach);
  font-size: calc(var(--lh) / var(--cap-ratio));
  line-height: var(--lh);
  height: var(--lh);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  white-space: nowrap;
  unicode-bidi: plaintext;
}
.lb-head,
.lb-top {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: var(--lh);
  flex: none;
}
.lb-fill {
  flex: 1 1 0;
  min-width: 12px;
  height: 100%;
  background: var(--c-blue);
}
.lb-capl {
  flex: none;
  width: 23px;
  height: 100%;
  background: var(--c-blue-dark);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
}
.lb-capr {
  flex: none;
  width: 17px;
  height: 100%;
  background: var(--c-orange);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.lb-pic {
  flex: 0 1 auto;
  min-height: 120px;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.lb-pic::-webkit-scrollbar {
  display: none;
}
.lb-pic img {
  width: 100%;
  height: auto;
  display: block;
}
.lb-alt {
  flex: 0 1 auto;
  min-height: 118px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: var(--lh) minmax(0, 1fr) var(--lf);
  column-gap: 0;
  row-gap: 0;
}
.lb-col {
  grid-column: 1;
  grid-row: 1 / 4;
  border-start-start-radius: 18px;
  border-end-start-radius: 18px;
  background: linear-gradient(
    var(--c-blue) 0 26px,
    transparent 26px 29px,
    var(--c-blue) 29px 62px,
    transparent 62px 65px,
    var(--c-blue) 65px
  );
}
.lb-top {
  grid-column: 2;
  grid-row: 1;
  padding-inline-start: 0;
}

.lb-text {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 6px 10px 6px 12px;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0.7);
  color: var(--c-periwinkle);
  font-size: 20px;
  line-height: 1.2;
  text-transform: none;
  text-align: start;
  unicode-bidi: plaintext;
}
.lb-text.none {
  color: var(--inactive-dim);
}
.lb-foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  height: var(--lf);
}
.lb-arm {
  flex: 1 0 72px;
  margin-inline-end: 0;
  background: var(--c-blue);
  border-end-start-radius: 18px;
}
.lb-foot button {
  flex: none;
  border: 0;
  padding: 2px 10px 0;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 0;
}
.lb-save {
  background: var(--c-periwinkle);
}
.lb-close {
  background: var(--c-red);
}
.lb-prev,
.lb-next {
  background: var(--c-lilac);
}
.lb-next {
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: 14px !important;
}
.lb-tri {
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
  border-inline-end: 9px solid var(--text-on-color);
}
.lb-next .lb-tri {
  border-inline-end: 0;
  border-inline-start: 9px solid var(--text-on-color);
}
.lb-bar {
  flex: none;
  width: calc(var(--lf) / 3.5);
  background: var(--c-peach);
}
.lb-count {
  flex: none;
  align-self: center;
  color: var(--c-orange);
  font-size: calc(var(--lf) / var(--cap-ratio));
  line-height: var(--lf);
  letter-spacing: var(--track-number);
  direction: ltr;
  padding: 0 2px;
}
.lb-foot [aria-disabled="true"] {
  background: var(--unable);
}
.lb-foot button {
  padding-inline: 6px;
  font-size: 18px;
}
.lb-arm {
  flex-basis: 30px;
  min-width: 30px;
}
.lb-next {
  padding-inline-end: 12px !important;
}
.bs-video {
  --vr: 16 / 9;
}
.bs-video {
  aspect-ratio: var(--vr);
  max-height: 520px;
  width: 100%;
  overflow: hidden;
  background: var(--c-panel-plum);
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
}
.bs-vplayer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--c-black);
}
.bs-vposter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  clip-path: inset(0 0 48px 0);
  background: var(--c-black);
}
.bs-vplay {
  position: absolute;
  inset-block: 0 48px;
  inset-inline: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-orange);
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--c-black);
}
.bs-vplay::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  transform: translateX(3px);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 24px solid var(--text-on-color);
}
.bs-video .bs-vext {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  background: var(--c-orange);
  color: var(--text-on-color);
  border: 0;
  font: inherit;
  font-size: 14px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 3px 10px 1px;
  border-radius: var(--cap-rx) / 99px;
  cursor: pointer;
}
.bsky-feed > .bs-chain-mid,
.bsky-feed > .bs-chain-last {
  margin-top: calc(var(--gap) - var(--feed-gap));
}
.bs-chain-first .bs-side {
  border-end-start-radius: 0;
}
.bs-chain-mid .bs-side {
  border-radius: 0;
}
.bs-chain-last .bs-side {
  border-start-start-radius: 0;
}
.bsky-feed > .bs-gaprow {
  margin-top: calc(-1 * var(--feed-gap));
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 10px;
}
.bsky-feed > .bs-gaprow + .bs-chain-mid {
  margin-top: calc(-1 * var(--feed-gap));
}
.bs-gside {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.bs-gside > i {
  flex: 1;
  background: var(--pa);
}
.bs-gside > i + i {
  background: var(--pb);
}
.bs-gap {
  justify-self: start;
  padding: 6px 0 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--c-blue-light);
  font-size: 16px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.bs-gap::before {
  content: "⋮";
  margin-inline-end: 8px;
  color: var(--text);
}
:is(.bs-chain-mid, .bs-chain-last) .bs-name {
  background: none;
  color: var(--pc);
  padding-inline: 0 2px;
}
:is(.bs-chain-mid, .bs-chain-last) .bs-av {
  --av: 32px;
}
:is(.bs-chain-mid, .bs-chain-last) .bs-handle::before {
  content: "•";
  margin-inline-end: 0.4em;
  color: var(--text);
}
.bsky-feed > .bs-sub + .bs-post::before {
  display: none;
}
.mo-bracket .bs-fbtn {
  display: none;
}
.mo .mo-bracket .inner > :is(.n, .bx) {
  display: none;
}
.mo .mo-bracket .inner {
  --ro: calc(var(--header) * 0.375);
}
.mo .mo-bracket .inner > .bs-fbtn {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.mo-bracket .bs-fn[hidden] {
  display: none;
}
.mo-bracket .bs-fn {
  --h: var(--ro);
  color: var(--number);
  letter-spacing: var(--track-number);
  padding: 0;
}
.mo-bracket .bs-fl {
  display: flex;
  align-items: flex-end;
  padding: 0 3px calc(var(--ro) * 0.17);
  box-sizing: border-box;
  background: var(--frame-tertiary);
}
.mo-bracket .bs-fl > span {
  --h: calc(var(--ro) * 0.6);
  display: block;
  height: var(--h);
  font-size: calc(var(--h) / var(--cap-ratio));
  line-height: var(--h);
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  white-space: nowrap;
}
.mo-bracket .bs-fbtn.bs-on .bs-fl {
  background: var(--title);
}
.mo-bracket .bs-fbtn.bs-on .bs-fn {
  color: var(--c-gold);
}
@keyframes bs-flash {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0.12;
  }
}
.mo-bracket .inner > .tk.bs-flash {
  animation: bs-flash 1.1s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mo-bracket .inner > .tk.bs-flash {
    animation: none;
  }
}
.bs-newtag {
  display: inline-block;
  margin-inline-start: 0.6em;
  padding: 1px 5px 0;
  background: var(--c-gold);
  color: var(--text-on-color);
  font-weight: inherit;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  vertical-align: 1px;
}
.bs-note .bs-main {
  cursor: pointer;
}
.bs-avs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  flex-wrap: wrap;
}
.bs-avs .bs-av {
  --av: 26px;
  cursor: pointer;
}
.bs-avs .bs-when {
  margin-inline-start: auto;
}
.bs-avs .bs-newtag {
  margin-inline-start: 4px;
}
.bs-ntxt {
  color: var(--text);
  font-size: 19px;
  line-height: 1.3;
  margin: 6px 0 0;
}
.bs-ntxt b {
  font-weight: inherit;
  cursor: pointer;
}
.bs-nsub {
  color: var(--title);
  opacity: 0.9;
  font-size: 17px;
  line-height: 1.3;
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bs-dm .bs-main {
  cursor: pointer;
}
.bs-unread {
  flex: none;
  align-self: center;
  min-width: 22px;
  height: 20px;
  padding: 2px 6px 0;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  background: var(--title);
  color: var(--text-on-color);
  font-weight: inherit;
  font-size: 15px;
  line-height: 18px;
}
.bs-dmlast {
  color: var(--title);
  font-size: 19px;
  line-height: 1.3;
  margin: 6px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-dmlast b {
  color: var(--text);
  font-weight: inherit;
}
.bs-dmlast i,
.bs-msg i {
  color: var(--text);
  font-style: normal;
}
.bsky-feed.bs-chat {
  gap: 0;
}
.bs-msgs {
  display: flex;
  flex-direction: column;
}
.bs-msg {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 10px;
  margin-top: var(--gap);
}
.bs-msg.first {
  margin-top: 18px;
}
.bs-msgs > .bs-msg:first-child {
  margin-top: 0;
}
.bs-msg .bs-side {
  background: var(--pc);
}
.bs-msg.first .bs-side {
  border-start-start-radius: 5px;
}
.bs-msg.last .bs-side {
  border-end-start-radius: 5px;
}
.bs-msg .bs-txt {
  margin: 2px 0 2px;
  font-size: calc(20px + var(--ts-dm, 0px));
}
.bs-mwho {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
}
.bs-mwho b {
  color: var(--pc);
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.bs-mwho .bs-when {
  align-self: baseline;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding-top: 0;
}
.bs-msg.mine {
  grid-template-columns: minmax(0, 1fr) 10px;
  margin-inline-start: 15%;
}
.bs-msg.mine > .bs-side {
  grid-column: 2;
  grid-row: 1;
  border-radius: 0;
}
.bs-msg.mine > .bs-main {
  grid-column: 1;
  grid-row: 1;
  text-align: end;
}
.bs-msg.mine .bs-mwho {
  justify-content: flex-end;
}
.bs-msg.mine.first > .bs-side {
  border-start-end-radius: 5px;
}
.bs-msg.mine.last > .bs-side {
  border-end-end-radius: 5px;
}
.bs-msg:not(.mine) {
  margin-inline-end: 15%;
}
.bs-older {
  align-self: center;
  margin-bottom: 14px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--c-blue-light);
  font-size: 16px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.bs-compose {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  margin-top: 22px;
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding-block: 6px;
}
.bs-compose textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  font: inherit;
  font-size: calc(19px + var(--ts-write, 0px));
  line-height: 1.3;
  color: var(--title);
  background: var(--bg);
  border: 2px solid var(--frame-tertiary);
  border-start-start-radius: 14px;
  border-end-start-radius: 14px;
  padding: 6px 10px;
  box-sizing: border-box;
  max-height: calc(15 * 1.3 * 19px + 16px);
}
.bs-compose textarea:focus {
  outline: none;
  border-color: var(--c-blue-light);
}
.bs-compose button {
  flex: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: var(--button-2);
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 17px;
  padding: 0 16px 4px 12px;
  display: flex;
  align-items: flex-end;
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-compose:not(.bs-write) > button {
  --dm-h: calc(2 * 1.3 * 19px + 16px);
  border-start-end-radius: calc(var(--squish) * var(--dm-h) / 2) calc(var(--dm-h) / 2);
  border-end-end-radius: calc(var(--squish) * var(--dm-h) / 2) calc(var(--dm-h) / 2);
}
[data-anchor="right"] .bsky-feed {
  direction: ltr;
}
[data-anchor="right"] .bsky-feed :is(.bs-post, .bs-gaprow, .bs-msg) {
  direction: rtl;
}
[data-anchor="right"] .bsky-feed :is(.bs-post, .bs-gaprow, .bs-msg) > :is(.bs-main, .bs-gap) {
  direction: ltr;
  text-align: start;
}
[data-anchor="right"] .bsky-feed :is(.bs-main, .bs-gap) p {
  text-align: inherit;
}
[data-anchor="right"] .bsky-feed .bs-msg.mine > .bs-main {
  text-align: end;
}
[data-anchor="right"] .bs-compose {
  direction: ltr;
}
[data-anchor="right"] .bsky-feed .bs-msg:not(.mine) {
  margin-inline: 15% 0;
}
[data-anchor="right"] .bsky-feed .bs-msg.mine {
  margin-inline: 0 15%;
}
.bsky-h .bs-new {
  flex: none;
  height: 100%;
  padding: 0 10px 2px;
  border: 0;
  background: var(--button-2);
  color: var(--text-on-color);
  font: inherit;
  font-size: 15px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.bsky-h .bs-new[hidden] {
  display: none;
}
.bs-compose.bs-write {
  position: static;
  flex-direction: column;
  gap: var(--gap);
  margin-top: 0;
  padding: 0;
  background: none;
}
.bs-write textarea {
  width: 100%;
  border-radius: 14px 14px 0 0;
  border-end-start-radius: 0;
}
.bs-wbar {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--gap);
  height: 28px;
}
.bs-left {
  --h: 20px;
  align-self: center;
  margin-inline-end: auto;
  color: var(--text);
  font-size: calc(var(--h) / var(--cap-ratio));
  line-height: var(--h);
  letter-spacing: var(--track-number);
}
.bs-left.over {
  color: var(--c-red);
}
.bs-write .bs-wbar button {
  flex: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 17px;
  padding: 0 16px 3px 12px;
  display: flex;
  align-items: flex-end;
}
.bs-write .bs-wbar [type="submit"] {
  background: var(--button-2);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-write .bs-wbar .bs-cancel {
  background: var(--button-4);
}
.bs-write .bs-wbar [aria-disabled="true"] {
  background: var(--unable);
}
.bs-write.busy textarea {
  opacity: 0.6;
}
.bs-write .bs-wbar .bs-addpic {
  background: var(--button-4);
}
.bs-pics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}
.bs-pics:empty {
  display: none;
}
.bs-tp {
  position: relative;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bs-tp img {
  display: block;
  width: 100%;
  height: 126px;
  object-fit: cover;
  background: var(--c-gray);
}
.bs-write .bs-tp .bs-unpic {
  position: absolute;
  top: 4px;
  right: 4px;
  left: auto;
  height: 20px;
  padding: 2px 9px 0;
  border: 0;
  border-radius: var(--cap-rx) / 99px;
  background: var(--c-tangerine);
  color: var(--text-on-color);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.bs-alt {
  width: 100%;
  height: 25px;
  box-sizing: border-box;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--text-alt);
  background: var(--bg);
  text-transform: none;
  letter-spacing: var(--track-label);
  border: 2px solid var(--c-periwinkle);
  border-radius: 0 0 12px 12px;
  padding: 0 10px 2px;
}
.bs-alt::placeholder {
  color: #757575;
  font-size: 14.5px;
  text-transform: uppercase;
  opacity: 1;
}
.bs-alt:focus {
  outline: none;
  border-color: var(--c-blue-light);
}
.bs-replybox {
  margin-top: 14px;
}
.bsky-feed > .bs-replybox + .bs-sub {
  margin-top: 10px;
}
.pf-following {
  flex: none;
  height: var(--nm);
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--c-blue-light);
  color: var(--text-on-color);
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.pf-handle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-h {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-acts {
  flex: none;
  display: flex;
  gap: var(--gap);
}
.pf-acts button {
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px 3px;
  display: flex;
  align-items: flex-end;
}
.pf-follow {
  background: var(--button-2);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  padding-inline-start: 12px !important;
}
.pf-follow.on {
  background: var(--button-4);
}
.pf-dm {
  background: var(--c-lilac);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: 12px !important;
}
.pf-dm[aria-disabled="true"] {
  background: var(--unable);
}
.pf-acts .busy,
.bs-del.busy {
  opacity: 0.6;
}
.bs-acts .bs-del {
  margin-inline-end: auto;
  background: var(--c-red);
  color: var(--text-on-color);
  font-size: 16px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0 10px 1px;
  align-items: flex-end;
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bsky-h .bs-search,
.bsky-h .bs-new {
  flex: none;
  height: 100%;
  padding: 0 10px 2px;
  border: 0;
  color: var(--text-on-color);
  font: inherit;
  font-size: 15px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.bsky-h .bs-search {
  background: var(--c-lilac);
}
.bsky-h .bs-new {
  background: var(--c-orange);
}
.bsky-h .bs-refresh {
  background: var(--c-periwinkle);
}
.bsky-h .bs-search,
.bsky-h .bs-new,
.bsky-h .bs-unonly,
.bsky-h .bs-home {
  align-items: center;
  padding-bottom: 0;
}
.mo .mo-bracket .inner {
  --ro: 22px;
  gap: var(--gap);
}
.mo .mo-bracket .inner > .pill.end {
  display: none;
}
.mo .mo-bracket .inner > .tk {
  width: calc(var(--ro) / 3.5);
}
.mo .mo-bracket .inner > .pill:not(.end) + .tk {
  background: var(--c-blue);
}
.mo .mo-bracket .inner > .pill:not(.end) {
  width: 30px;
}
.mo .mo-bracket .inner > .long {
  flex: 1 1 0;
}
.mo .mo-bracket .bs-fl {
  padding: 0 6px calc(var(--ro) * 0.2);
}
.mo .mo-bracket .bs-fl > span {
  --h: calc(var(--ro) * 0.5);
}
.bs-post {
  --hd: 22px;
}
.bs-post.bs-top {
  grid-template-rows: auto auto auto;
  column-gap: 10px;
}
.bs-top > .bs-why {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 4px 28px;
}
.bs-top > .bs-hd {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 32px;
  padding-inline-start: 28px;
  position: relative;
  z-index: 1;
}
.bs-top > .bs-main {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  z-index: 1;
}
.bs-top > .bs-hood {
  grid-column: 1 / 3;
  grid-row: 2 / -1;
  justify-self: start;
  width: 25px;
  margin-top: 5px;
  position: relative;
  background: var(--pc, var(--c-lilac));
  border-start-start-radius: 23px;
  border-end-start-radius: 5px;
}
.bs-top > .bs-hood::after {
  content: "";
  position: absolute;
  inset-inline: 10px 0;
  top: var(--hd);
  bottom: 0;
  background: var(--bg);
  border-start-start-radius: 7px;
}
.bs-top.bs-chain-first > .bs-hood {
  border-end-start-radius: 0;
}
.bs-pic {
  flex: none;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--pc, var(--c-lilac));
  background: var(--c-black);
  overflow: hidden;
  display: block;
  cursor: pointer;
}
.bs-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-nbar {
  flex: 1 1 0;
  min-width: 0;
  height: var(--hd);
  background: var(--pc, var(--c-lilac));
  color: var(--text-on-color);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 8px;
  direction: ltr;
  text-transform: uppercase;
}
.bs-nbar .bs-nm {
  flex: 0 1 auto;
  padding: 2px 0 0;
  font-size: 19px;
  letter-spacing: var(--track-label);
  cursor: pointer;
}
.bs-nbar .bs-handle {
  flex: 0 100 auto;
  margin-inline-start: auto;
  color: var(--text-on-color);
  font-size: 13px;
  letter-spacing: var(--track-label);
  padding-top: 1px;
  cursor: pointer;
  text-transform: uppercase;
}
.bs-tcap {
  flex: none;
  height: var(--hd);
  background: var(--c-gold);
  color: var(--text-on-color);
  font-size: 15px;
  letter-spacing: var(--track-label);
  padding: 2px 10px 0 8px;
  box-sizing: border-box;
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  display: flex;
  align-items: center;
  direction: ltr;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-anchor="right"] .bsky-feed .bs-hd {
  direction: rtl;
}
[data-anchor="right"] .bs-tcap {
  border-radius: var(--cap-rx) 0 0 var(--cap-rx) / 99px 0 0 99px;
}
.bs-top .bs-txt {
  margin-top: 10px;
}
.bs-vpost {
  --hd: 14px;
}
.bs-vpost > .bs-hd {
  height: 14px;
  padding-inline-start: 28px;
}
.bs-vpost > .bs-hood {
  margin-top: 0;
}
.bs-vft {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 14px;
  cursor: pointer;
  direction: ltr;
}
.bs-vb {
  flex: none;
  width: 6px;
  height: 14px;
  background: var(--c-blue-light);
}
.bs-vd {
  flex: none;
  color: var(--text);
  font-size: 18px;
  line-height: 14px;
  padding-inline: 5px 2px;
}
.bs-vt {
  color: var(--c-blue-light);
  font-size: 19.5px;
  line-height: 14px;
  height: 14px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 1px;
}
.bs-rt {
  margin: 17px 0 13px 4px;
  font-size: 16px;
  color: var(--c-periwinkle);
  cursor: pointer;
}
.bs-rt b {
  margin-inline-start: 0.3em;
}
.bs-gap {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 6px 0 12px;
}
.bs-gap::before {
  content: none;
}
.bs-post .bs-wh {
  height: 32px;
  gap: 8px;
}
.bs-wh .bs-name {
  background: none;
  color: var(--pc);
  padding: 0;
  max-width: none;
  flex: 0 1 auto;
  gap: 8px;
  --av: 32px;
  cursor: pointer;
}
.bs-wh .bs-nm {
  font-size: 19px;
  padding-top: 2px;
  text-transform: uppercase;
}
.bs-wh .bs-handle {
  flex: 0 100 auto;
  margin-inline-start: auto;
  color: var(--c-blue-light);
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}
.bs-wh .bs-handle::before {
  content: none !important;
}
.bs-wh .bs-tick {
  flex: none;
  width: 3px;
  height: 10.5px;
  background: var(--c-orange);
  align-self: center;
}
.bs-wh .bs-when {
  color: var(--c-gold);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding-top: 1px;
}
.bs-mut {
  --cap-h: calc(19px * var(--cap-ratio));
  flex: none;
  width: var(--cap-h);
  height: calc(var(--cap-h) + 0.5px);
  background: var(--c-orange);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  align-self: center;
  position: relative;
  top: 0.65px;
}
.bs-quote {
  border-color: var(--pc, var(--frame-tertiary));
}
.bs-quote .bs-q-who {
  text-transform: uppercase;
}
.bs-quote .bs-q-txt {
  color: var(--text);
}
[data-anchor="right"] .bsky-feed .bs-quote {
  border-radius: 14px 0 0 14px;
}
[data-anchor="right"] .bsky-feed .bs-quote {
  text-align: start;
}
.bsky-feed .bs-quote.bs-rq,
[data-anchor="right"] .bsky-feed .bs-quote.bs-rq {
  background: var(--qc);
  border-color: var(--qc);
  border-radius: 14px;
}
.bs-quote.bs-rq .bs-q-who,
.bs-quote.bs-rq .bs-q-txt {
  color: var(--text-on-color);
  font-size: 14px;
}
.bs-quote.bs-rq a {
  color: inherit;
}
.bs-quote.bs-rq .bs-q-who {
  font-weight: 700;
}
.bs-asep {
  width: calc(21px / 3.5);
}
.bsky-view {
  --field-fill: color-mix(in srgb, var(--c-periwinkle) 9%, var(--bg));
}
.bs-init {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 22px;
  margin-bottom: var(--margin, 12px);
}
.bs-init[hidden] {
  display: none;
}
.bs-init i {
  flex: 1;
  min-width: 12px;
  height: 100%;
  background: var(--c-orange);
}
.bs-init i:first-child {
  border-radius: var(--cap-rx) 0 0 var(--cap-rx) / 99px 0 0 99px;
}
.bs-init i:last-child {
  border-radius: 0 var(--cap-rx) var(--cap-rx) 0 / 0 99px 99px 0;
}
.bs-init span {
  flex: none;
  color: var(--c-blue-light);
  font-size: calc(22px / var(--cap-ratio));
  line-height: 22px;
  height: 22px;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  white-space: nowrap;
}
.bs-init span {
  padding-inline: 8px;
}
.bsky-h .bs-search {
  cursor: pointer;
}
.bsky-h .bs-search[aria-pressed="true"] {
  background: var(--c-blue-light);
}
.bs-sbar {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.bs-sbar.open {
  grid-template-rows: 1fr;
}
.bs-sbar > div {
  min-height: 0;
  overflow: hidden;
}
.bs-sin {
  display: flex;
  align-items: stretch;
  height: 32px;
  margin-top: var(--gap);
  box-sizing: border-box;
  border: 2px solid var(--c-blue-light);
  border-radius: var(--cap-rx) / 99px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--c-tangerine) 50%, var(--c-blue-light) 50%);
}
[data-anchor="right"] .bs-sin {
  background: linear-gradient(90deg, var(--c-blue-light) 50%, var(--c-tangerine) 50%);
}
.bs-sin input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: var(--field-fill);
  color: var(--text-alt);
  font: inherit;
  font-size: 22px;
  letter-spacing: var(--track-label);
  padding: 2px 12px 0;
  text-transform: uppercase;
  direction: ltr;
  text-align: start;
}
.bs-sin input {
  text-align: right;
}
.bs-sin input::placeholder {
  color: #757575;
  font-size: 19px;
  opacity: 1;
}
.bs-sin input:focus {
  outline: none;
}
.bs-sin button {
  flex: none;
  border: 0;
  background: var(--c-blue-light);
  color: var(--text-on-color);
  font: inherit;
  font-size: 24px;
  letter-spacing: var(--track-label);
  padding: 2px 14px 0 12px;
  text-transform: uppercase;
  cursor: pointer;
}
[data-anchor="right"] .bs-sin {
  direction: rtl;
}
[data-anchor="right"] .bs-sin input {
  direction: ltr;
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  .bs-sbar {
    transition: none;
  }
}
.bs-acts .bs-rbtn.open .bs-al {
  background: var(--c-blue-light);
}
.bs-rbox {
  margin-block: calc(9px - var(--feed-gap)) 0;
}
.bsky-feed > .bs-pbox {
  margin-top: 0;
}
.bsky-feed > .bs-replybox {
  margin-top: calc(9px - var(--feed-gap));
}
.bsky-h .bs-new.open {
  background: var(--c-blue-light);
}
.bs-replybox {
  gap: var(--gap);
}
.bs-replybox textarea {
  box-sizing: border-box;
  min-height: 93px;
  overflow: hidden;
  border: 2px solid var(--c-blue-light);
  border-radius: 0 0 14px 14px;
  background: var(--field-fill);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-alt);
  padding: 6px 12px;
}
.bs-replybox textarea::placeholder {
  color: #757575;
  font-size: 19px;
  opacity: 1;
}
.bs-replybox .bs-wbar {
  height: 28px;
  align-items: center;
  margin-top: 4px;
}
.bs-replybox .bs-left {
  --h: 21px;
  color: var(--c-periwinkle);
  text-transform: uppercase;
}
.bs-replybox .bs-left {
  white-space: nowrap;
  margin-inline-end: auto;
}
.bs-replybox .bs-left b {
  font-weight: inherit;
}
.bs-replybox .bs-left.over {
  color: var(--c-red);
}
.bs-replybox .bs-wbar button {
  height: 100%;
  align-items: flex-end;
  padding: 0 12px 4px 12px;
  font-size: 16px;
  line-height: 1;
  background: var(--button-4);
  border-radius: 0;
}
.bs-replybox .bs-wbar button.bs-addpic {
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  padding-inline-start: 18px;
}
.bs-replybox .bs-wbar button.bs-addvid {
  border-radius: 0;
}
.bs-replybox .bs-wbar button[type="submit"] {
  background: var(--button-2);
  border-radius: 0;
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: 18px;
}
.bs-bsep {
  flex: none;
  width: 8px;
  height: 100%;
  background: var(--c-butter);
}
.bs-replybox .bs-wbar [aria-disabled="true"] {
  background: var(--unable);
}
.bs-mutbar {
  flex: none;
  width: 6px;
  height: var(--hd);
  background: var(--c-orange);
}
.bs-wh .bs-handle {
  color: var(--c-blue);
  font-size: 13px;
}
.bs-wh .bs-when {
  font-size: 13px;
}
.bs-wh .bs-tick {
  width: 4px;
  height: 13.5px;
  margin-inline: -5px;
}
.bs-sin {
  margin-top: 10px;
}
.bsky-h .bs-search,
.bsky-h .bs-new,
.bs-acts .bs-rbtn .bs-al {
  position: relative;
}
.bsky-h .bs-search::after,
.bsky-h .bs-new::after,
.bs-acts .bs-rbtn.open .bs-al::after {
  content: "";
  position: absolute;
  top: 100%;
  height: 10px;
  inset-inline: -10px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, transparent 9.5px, var(--c-blue-light) 10px) left top / 10px 10px no-repeat,
    radial-gradient(circle at 100% 0, transparent 9.5px, var(--c-blue-light) 10px) right top / 10px 10px no-repeat,
    linear-gradient(var(--c-blue-light), var(--c-blue-light)) center / calc(100% - 20px) 100% no-repeat;
}
.bsky-h .bs-search[aria-pressed="true"]::after,
.bsky-h .bs-new.open::after,
.bs-acts .bs-rbtn.open .bs-al::after {
  opacity: 1;
  transition: opacity 0.01s 0.22s;
}
.bs-acts .bs-rbtn.open .bs-al::after {
  inset-inline-end: 0;
  background:
    radial-gradient(circle at 0 0, transparent 9.5px, var(--c-blue-light) 10px) left top / 10px 10px no-repeat,
    linear-gradient(var(--c-blue-light), var(--c-blue-light)) right top / calc(100% - 10px) 100% no-repeat;
}
.bs-rbox {
  margin-block: calc(10px - var(--feed-gap)) 0;
}
.bsky-feed > .bs-replybox {
  margin-top: calc(10px - var(--feed-gap));
}
.bs-sin input {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 9px 3px 12px;
  line-height: 1;
  height: 100%;
  box-sizing: border-box;
}
.bs-sin input::-webkit-search-cancel-button,
.bs-sin input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}
[data-anchor="right"] .bs-sin input {
  padding: 0 12px 3px 9px;
}
.pf-id {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: start;
}
.pf-id > .pf-stats {
  align-self: end;
}
.pf-handle {
  align-self: center;
  justify-content: space-between;
}
.pf-namerow {
  justify-content: space-between;
  align-items: center;
}
.pf-acts {
  margin-inline-start: auto;
  align-items: center;
}
.pf-acts :is(button, .pf-tag) {
  height: calc(var(--hd) * 1.2);
  box-sizing: border-box;
  padding: 0 10px 3px;
  display: flex;
  align-items: flex-end;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-color);
}
.pf-tag {
  border-start-start-radius: var(--cap-r) !important;
  border-end-start-radius: var(--cap-r) !important;
  padding-inline-start: 14px !important;
}
.pf-tag.f {
  background: var(--c-blue-light);
}
.pf-tag.y {
  background: var(--c-gold);
}
.pf-tag.m {
  background: var(--c-orange);
}
.pf-acts .pf-dm {
  background: var(--c-blue-light);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: 14px !important;
}
.pf-acts .pf-dm.solo {
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  padding-inline-start: 14px !important;
}
.pf-acts .pf-dm[aria-disabled="true"] {
  background: var(--unable);
}
.pf-acts .pf-follow {
  background: var(--c-gold);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  padding-inline-start: 14px !important;
}
.pf-acts .pf-follow.on {
  background: var(--c-periwinkle);
}
.pf-acts .pf-mute {
  background: var(--c-red);
}
.pf-acts .pf-mute.on {
  background: var(--c-peach);
}
.pf-sep {
  flex: none;
  align-self: stretch;
  width: calc(var(--hd) * 1.2 / 3.5);
  background: var(--inactive-dim);
}
.pf-acts .pf-block {
  background: var(--c-rust);
}
.pf-acts .pf-block.on {
  background: var(--c-tangerine);
}
.pf-acts .busy {
  opacity: 0.6;
}
.mo[data-top] .subframe > .bar-divider {
  width: calc(var(--b) * 14.5);
  justify-self: center;
  margin-inline-start: var(--sub-col);
}
.mo[data-top] .bar-divider .cut {
  width: calc(var(--b) * 0.3);
  display: block;
}
.mo[data-top] .bar-divider .cut.c {
  inset-inline-end: 0;
}
.mo[data-top] .bar-divider .cut.d {
  inset-inline-end: calc(var(--b) * 1.45);
}
.mo[data-top] .bar-divider .cut.b {
  inset-inline-end: calc(var(--b) * 12.75);
}
.mo[data-top] .bar-divider .cut.a {
  inset-inline-end: calc(var(--b) * 14.2);
}
.mo[data-top] .bar-divider .box {
  inset-inline: auto calc(var(--b) * 2.9);
  width: calc(var(--b) * 8.7);
  border-radius: calc(var(--b) * 0.45);
}
.mo[data-top] .bar-divider .line {
  inset-inline: auto calc(var(--b) * 4.35);
  width: calc(var(--b) * 5.8);
}
.mo[data-top]:not([data-more~="top"]) .bar-divider .line.t,
.mo[data-top]:not([data-more~="bottom"]) .bar-divider .line.b {
  display: none;
}
.mo[data-top] .bar-divider .node {
  display: none;
}
.mo[data-top] .bs-bio-toggle {
  inset-inline: auto calc(var(--b) * 2.9);
  width: calc(var(--b) * 8.7);
}
.bs-bio-toggle[aria-expanded="true"] i {
  border-bottom-color: var(--c-peach);
}
.bs-bio-toggle[aria-expanded="false"] i {
  border-top-color: var(--c-peach);
}
.bar-divider .cut.c,
.bar-divider .cut.d {
  display: none;
}

.pf-h {
  text-transform: uppercase;
}
.mo[data-top] .stack.top > .a {
  display: none;
}
.mo[data-top] .subframe > .bar-divider {
  z-index: 6;
}
.pf-namerow {
  align-items: flex-start;
}
.pf-namerow > .pf-tabs {
  align-self: flex-start;
  gap: 3px;
}
.bs-write textarea,
.bs-replybox textarea {
  text-transform: none;
}
.bs-write textarea::placeholder,
.bs-replybox textarea::placeholder {
  text-transform: uppercase;
}
[data-anchor="right"] .lb-text {
  direction: ltr;
  text-align: left;
}
.lb-col {
  position: relative;
}
.lb-col::before,
.lb-col::after {
  content: "";
  position: absolute;
  inset-inline-end: -10px;
  width: 10px;
  height: 10px;
  z-index: 1;
  pointer-events: none;
}
.lb-col::before {
  top: var(--lh);
  background: radial-gradient(circle at 100% 100%, transparent 9.5px, var(--c-blue) 10px);
}
.lb-col::after {
  bottom: var(--lf);
  background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--c-blue) 10px);
}
[data-anchor="right"] .lb-col::before {
  background: radial-gradient(circle at 0 100%, transparent 9.5px, var(--c-blue) 10px);
}
[data-anchor="right"] .lb-col::after {
  background: radial-gradient(circle at 0 0, transparent 9.5px, var(--c-blue) 10px);
}
.lb-foot button {
  direction: ltr;
}
.lb-foot .lb-next {
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.lb-tri {
  border-inline: 0;
  border-right: 9px solid var(--text-on-color);
}
.lb-next .lb-tri {
  border-right: 0;
  border-left: 9px solid var(--text-on-color);
}
[data-anchor="right"] .lb-foot > :nth-child(4) {
  order: 7;
}
[data-anchor="right"] .lb-foot > :nth-child(5) {
  order: 4;
}
[data-anchor="right"] .lb-foot > :nth-child(6) {
  order: 5;
}
[data-anchor="right"] .lb-foot > :nth-child(7) {
  order: 6;
}
[data-anchor="right"] .lb-foot > :nth-child(8) {
  order: 3;
}
[data-anchor="right"] .lb-foot > :nth-child(1) {
  order: 0;
}
[data-anchor="right"] .lb-foot > :nth-child(2) {
  order: 1;
}
[data-anchor="right"] .lb-foot > :nth-child(3) {
  order: 2;
}
[data-anchor="right"] .lb-foot .lb-next {
  border-radius: 0;
}
[data-anchor="right"] .lb-foot .lb-prev {
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: 14px !important;
}
.bs-left.warn,
.bs-replybox .bs-left.warn {
  color: var(--c-gold);
}
.bs-left.over,
.bs-replybox .bs-left.over {
  color: var(--c-rust);
}
.bs-ta {
  position: relative;
  box-sizing: border-box;
  border: 2px solid var(--c-blue-light);
  border-radius: 0 0 14px 14px;
  background: var(--field-fill);
}
.bs-replybox .bs-ta textarea {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  caret-color: var(--text-alt);
  position: relative;
  z-index: 1;
  margin: 0;
}
.bs-ta-mirror {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 6px 12px;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: var(--track-label);
  text-transform: none;
  color: var(--text-alt);
  unicode-bidi: plaintext;
  text-align: start;
}
.bs-ta-mirror .over {
  color: var(--c-rust);
}
.bs-replybox .bs-ta textarea {
  min-height: 89px;
}
.bs-vidbox:empty {
  display: none;
}
.bs-vid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bs-vid[data-st="uploading"] {
  gap: 7px;
}
.bs-vup {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 17.3px;
}
.bs-vup[hidden],
.bs-vproc[hidden] {
  display: none;
}
.bs-vup > i,
.bs-vup > span {
  flex: none;
}
.bs-vup .vc {
  width: 17px;
  background: var(--c-periwinkle);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
}
.bs-vup span {
  background: var(--c-gold);
  color: var(--text-on-color);
  font-size: 13px;
  line-height: 1;
  padding: 3px 5px 0;
  display: flex;
  align-items: center;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.bs-vup .vr {
  flex: 1 1 0;
  background: var(--c-red);
}
.bs-vup .vg {
  flex: 1 1 0;
  background: var(--c-gray-dim);
}
.bs-vup .ve {
  width: 16px;
  background: var(--c-gold);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-vtp video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--c-black);
}
.bs-vtp {
  position: relative;
}
.bs-vproc {
  position: absolute;
  inset-inline: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.bs-vproc .vp {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 17.3px;
  padding: 3px;
  border-radius: var(--cap-rx) / 99px;
  background: #231f20;
  box-sizing: content-box;
}
.vp .pc {
  flex: none;
  width: 17px;
  background: var(--c-blue-dark);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
}
.vp span {
  flex: none;
  background: var(--c-blue-light);
  color: var(--text-on-color);
  font-size: 13px;
  line-height: 1;
  padding: 3px 5px 0;
  display: flex;
  align-items: center;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.vp .pk {
  flex: none;
  width: 11.7px;
  background: var(--c-peach);
}
.vp .pt {
  flex: 1 1 0;
  min-width: 0;
  background: var(--c-periwinkle);
  position: relative;
}
.vp .pf {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background: var(--c-gold);
}
.vp .pe {
  flex: none;
  width: 17px;
  background: var(--c-tangerine);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-valt::placeholder {
  color: #757575;
  font-size: 14.5px;
  text-transform: uppercase;
  opacity: 1;
}
.bsky-h .bs-lab[data-bs="feeds"] {
  cursor: pointer;
}
.bsky-h .bs-lab[data-bs="feeds"]:focus-visible {
  outline: 2px solid var(--c-blue-light);
  outline-offset: 2px;
}
.bs-feeds {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.bs-feeds.open {
  grid-template-rows: 1fr;
}
.bs-feeds > div {
  min-height: 0;
  overflow: hidden;
}
.bs-fscroll {
  display: flex;
  gap: 3px;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
  direction: ltr;
}
.bs-fscroll::-webkit-scrollbar {
  display: none;
}
.bs-fp {
  flex: none;
  height: 22px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--cap-rx) / 99px;
  padding: 2px 11px 0;
  background: var(--c-gold);
  color: var(--text-on-color);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.bs-fp[aria-pressed="true"] {
  background: var(--c-orange);
}
@media (prefers-reduced-motion: reduce) {
  .bs-feeds {
    transition: none;
  }
}
.bs-endunread {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.bs-endunread i {
  flex: 1 1 0;
  min-width: 12px;
  height: 100%;
  background: var(--c-rust);
}
.bs-endunread i:first-child {
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
}
.bs-endunread i:last-child {
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-endunread span {
  flex: none;
  color: var(--c-peach);
  font-size: calc(22px / var(--cap-ratio));
  line-height: 22px;
  height: 22px;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  white-space: nowrap;
}
.bs-gif {
  display: block;
  position: relative;
  max-width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: var(--c-panel-plum);
  overflow: hidden;
}
.bs-gif img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}
.bs-gif.still {
  cursor: pointer;
}
.bs-gif i {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: 6px;
  padding: 2px 8px 0;
  background: var(--c-orange);
  color: var(--text-on-color);
  font-style: normal;
  font-size: 14px;
  line-height: 1.2;
  border-radius: var(--cap-rx) / 99px;
  letter-spacing: var(--track-label);
}
.bs-acts .bs-rbtn.replied:not(.open) .bs-al {
  background: var(--c-gold);
}
.bs-acts .bs-rbtn.replied .bs-n {
  color: var(--c-gold);
}
.bs-repbtn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.bs-hm {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
  background: #000;
  border-radius: 15px 0 0 15px;
  min-width: 124px;
}
.bs-hm-i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 22px;
  padding: 2px 4px 0 12px;
  border: 0;
  border-radius: var(--cap-rx) 0 0 var(--cap-rx) / 99px 0 0 99px;
  box-sizing: border-box;
  background: var(--c-tangerine);
  color: var(--text-on-color);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.bs-hm-i i {
  flex: none;
  width: 4px;
  height: 14px;
  margin-top: -2px;
  background: transparent;
}
.bs-hm-i[aria-selected="true"] {
  background: var(--c-peach);
}
.bs-hm-i[aria-selected="true"] i {
  background: var(--c-orange);
}
.bs-acts .bs-repbtn .bs-al {
  position: relative;
}
.bs-acts .bs-repbtn.open .bs-al {
  background: var(--c-blue-light);
}
.bs-acts .bs-repbtn.open .bs-al::after {
  content: "";
  position: absolute;
  top: 100%;
  height: 10px;
  inset-inline: -10px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, transparent 9.5px, var(--c-blue-light) 10px) left top / 10px 10px no-repeat,
    radial-gradient(circle at 100% 0, transparent 9.5px, var(--c-blue-light) 10px) right top / 10px 10px no-repeat,
    linear-gradient(var(--c-blue-light), var(--c-blue-light)) center / calc(100% - 20px) 100% no-repeat;
}
.bs-pull {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding-bottom: 6px;
  box-sizing: border-box;
  min-height: 0;
}
.bs-pull.ready {
  color: var(--c-orange);
}
.bs-pull[hidden] {
  display: none;
}
.pf-pic[data-full] {
  cursor: pointer;
}
.pf-pic[data-full]:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}
.bs-sin .bs-smode {
  background: var(--c-tangerine);
  padding: 2px 12px 0 14px;
  font-size: 20px;
  min-width: 5.2em;
}
.bs-person .bs-who {
  flex-wrap: wrap;
}
.bs-fy {
  flex: none;
  background: var(--c-gold);
  color: var(--text-on-color);
  font-weight: inherit;
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 1px 8px 0;
  border-radius: var(--cap-rx) / 99px;
  line-height: 17px;
}
.bs-person .bs-dmlast {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pf-acts .pf-edit {
  background: var(--c-gold);
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  padding-inline-start: 14px !important;
}
.pf-acts .pf-share {
  background: var(--c-blue-light);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: 14px !important;
}
.pf-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: var(--para-gap);
}
.pf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  min-width: 50px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--cap-rx) / 99px;
  background: var(--c-periwinkle);
  color: var(--text-on-color);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.pf-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-edit {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.be-pics {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap);
}
.be-pic {
  position: relative;
  border: 2px solid var(--c-periwinkle);
  background: var(--bg);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  height: 110px;
  font: inherit;
}
.be-av {
  width: 110px;
  border-radius: 50%;
}
.be-bn {
  border-radius: 14px;
}
.be-pic img,
.be-pic > i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.be-pic span {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 3px 0 5px;
  background: rgb(0 0 0 / 0.7);
  color: var(--c-gold);
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
}
.be-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.be-l {
  color: var(--c-periwinkle);
  font-size: 17px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.bs-edit :is(input:not([type="file"]), textarea) {
  font: inherit;
  font-size: 19px;
  line-height: 1.3;
  color: var(--title);
  background: var(--bg);
  text-transform: none;
  border: 2px solid var(--frame-tertiary);
  border-radius: 14px;
  padding: 6px 12px;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}
.bs-edit textarea {
  resize: vertical;
}
.bs-edit :is(input, textarea):focus {
  outline: none;
  border-color: var(--c-blue-light);
}
.bs-edit ::placeholder {
  color: #757575;
}
.be-links {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.be-links:empty {
  display: none;
}
.be-link {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: var(--gap);
}
.be-link input {
  font-size: 17px !important;
  padding-block: 4px !important;
}
.bs-edit button:is(.be-rm, .be-add) {
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 15px;
  padding: 0 13px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-edit .be-rm {
  background: var(--c-red);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-edit .be-add {
  align-self: flex-start;
  height: 26px;
  min-width: 104px;
  background: var(--c-periwinkle);
  border-radius: var(--cap-rx) / 99px;
  margin-top: 2px;
}
.bs-edit .be-add[aria-disabled="true"] {
  background: var(--unable);
}
.bs-edit .bs-wbar button {
  flex: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 17px;
  padding: 0 16px 3px 12px;
  display: flex;
  align-items: flex-end;
}
.bs-edit .bs-wbar [type="submit"] {
  background: var(--button-2);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
}
.bs-edit .bs-wbar .bs-cancel {
  background: var(--button-4);
}
.bs-edit .bs-wbar [aria-disabled="true"] {
  background: var(--unable);
}
.be-link {
  grid-template-columns: minmax(0, 1fr) auto;
}
.be-link .be-lt {
  grid-column: 1 / -1;
}
.be-av,
.be-pic {
  height: 90px;
}
.be-av {
  width: 90px;
}
.bs-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
}
.sh-card {
  width: min(340px, 100%);
  border-radius: 22px;
  overflow: hidden;
  background: var(--c-peach);
  display: flex;
  flex-direction: column;
}
.sh-qr {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.sh-h {
  background: var(--c-gold);
  color: var(--text-on-color);
  text-align: center;
  justify-content: center;
  font-size: 22px;
  letter-spacing: var(--track-label);
  padding: 5px 10px 7px;
  overflow-wrap: anywhere;
}
.sh-url {
  color: var(--c-periwinkle);
  font-size: 19px;
  letter-spacing: var(--track-text);
  overflow-wrap: anywhere;
  text-align: center;
}
.sh-acts {
  height: 30px;
  justify-content: center;
}
.sh-acts button {
  flex: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 17px;
  padding: 0 14px 3px;
  display: flex;
  align-items: flex-end;
  background: var(--c-blue-light);
}
.sh-acts button:first-child {
  border-start-start-radius: var(--cap-r);
  border-end-start-radius: var(--cap-r);
  padding-inline-start: 16px;
}
.sh-acts button:last-child {
  background: var(--c-gold);
  border-start-end-radius: var(--cap-r);
  border-end-end-radius: var(--cap-r);
  padding-inline-end: 16px;
}
[data-anchor="right"] :is(.bs-edit, .bs-share) {
  direction: ltr;
}

/* ===== Settings ===== */

.settings-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin-top: 0;
}
.settings-view[hidden] {
  display: none;
}
.settings-view .mail-sticky {
  flex: none;
}
.mo .settings-view .mail-sticky {
  display: none;
}

/* Size */
.size-h {
  color: var(--button-3);
  font-size: 15px;
  line-height: 1;
  letter-spacing: var(--track-title);
  margin: 4px 0 8px;
}
.size-h + .controls {
  margin-bottom: 16px;
}

/* Text size */
.ts-box {
  max-width: 480px;
  padding-block: 4px 0;
}
.ts-row {
  display: flex;
  align-items: center;
  height: 11.5px;
  margin: 0 0 10px;
}
.ts-row > * {
  position: relative;
  flex: none;
  height: 11.5px;
}
.ts-name {
  width: 130px;
  color: var(--frame-secondary);
  font-size: 17px;
  line-height: 11.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.ts-row button {
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-on-color);
  cursor: pointer;
}
.ts-row .ts-dn,
.ts-row .ts-up {
  width: 20px;
  background: var(--button-2);
  font-size: 13px;
  line-height: 11px;
}
.ts-dn {
  border-radius: var(--cap-rx) 0 0 var(--cap-rx) / 99px 0 0 99px;
  margin-inline-end: 3px;
}
.ts-up {
  border-radius: 0 var(--cap-rx) var(--cap-rx) 0 / 0 99px 99px 0;
  margin-inline-start: 3px;
}
.ts-bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  overflow: hidden;
  direction: ltr;
  cursor: pointer;
  touch-action: none;
}
.ts-bar i {
  display: block;
  height: 100%;
}
.ts-bar .fill {
  background: var(--c-red);
}
.ts-bar .rest {
  background: var(--button-4);
}
.ts-bar .mark {
  flex: none;
  width: 3px;
  margin-inline: 3px;
  background: var(--button-1);
}
.ts-bar .mark[hidden] {
  display: none;
}
.ts-bar:focus-visible {
  outline: 2px solid var(--title);
  outline-offset: 1px;
}
.ts-row .ts-reset {
  width: 41px;
  margin-inline-start: 4px;
  border-radius: var(--cap-rx) / 99px;
  background: var(--button-2);
  font-size: 12px;
  line-height: 11.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.ts-row button[aria-disabled="true"] {
  background: var(--unable);
}
.ts-row :is(button, .ts-bar)::after {
  content: "";
  position: absolute;
  inset: -4px -1px;
}
[data-side="left"] .ts-box {
  margin-inline-start: auto;
}
[data-side="left"] .size-h {
  text-align: right;
}
[data-side="left"] .ts-up { order: 2; }
[data-side="left"] .ts-bar { order: 3; }
[data-side="left"] .ts-dn { order: 4; }
[data-side="left"] .ts-reset { order: 5; }

/* ===== Frame ====== */

html,
body {
  height: 100%;
}
body {
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}
/* Interface size */
html {
  zoom: var(--ui-zoom, 1);
}
body {
  height: calc(100vh / var(--ui-zoom, 1));
  height: calc(100dvh / var(--ui-zoom, 1));
}
.ctl-top {
  margin-bottom: 24px;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: var(--stack-gap);
}
.controls button {
  font: inherit;
  font-size: var(--type-sm);
  letter-spacing: var(--track-label);
  border: 0;
  border-radius: var(--r-pill-x) / 999px;
  padding: 4px 16px 2px;
  cursor: pointer;
  background: var(--button-4);
  color: var(--text-on-color);
}
.controls button.on {
  background: var(--button-2);
}
.grp {
  display: inline-block;
}
details.section {
  margin-top: 32px;
}
.ctl-top details.section {
  margin-top: 0;
}
.ctl-top details.section + details.section {
  margin-top: 6px;
}
.ctl-top details.section > summary {
  margin-bottom: 6px;
}
.ctl-top .section-body {
  padding-bottom: 12px;
}
.ctl-top .controls + .controls {
  margin-top: 0;
}
details.section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-bottom: 12px;
}
details.section > summary .pill-cap {
  width: 17px;
  height: var(--bar);
  background: var(--button-2);
  border-start-start-radius: var(--r-pill);
  border-end-start-radius: var(--r-pill);
}
details.section > summary .rule {
  flex: 1;
  height: var(--bar);
  background: var(--frame-tertiary);
}
details.section > summary .label {
  color: var(--title);
  letter-spacing: var(--track-title);
}
details.section[open] > summary .pill-cap {
  background: var(--title);
}
.frame {
  width: 100%;
  height: 100%;
}
.scroll {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
@media (hover: hover) and (pointer: fine) {
  .scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--frame-tertiary) transparent;
  }
}
@media not ((hover: hover) and (pointer: fine)) {
  .scroll {
    scrollbar-width: none;
  }
  .scroll::-webkit-scrollbar {
    display: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .scroll {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  .scroll::-webkit-scrollbar {
    width: 10px;
  }
  .scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .scroll::-webkit-scrollbar-thumb {
    background: var(--frame-tertiary);
    border-radius: 5px;
    border: 1px solid transparent;
    background-clip: padding-box;
  }
  .scroll::-webkit-scrollbar-button:single-button:vertical {
    display: block;
    height: 12px;
    background: no-repeat center / 8px 6px;
  }
  .scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: calc(var(--scroll-head, 0px) + 14px);
    background-position: center bottom 3px;
    background-size: 8px 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M4 0 8 6H0z' fill='%239999CC'/%3E%3C/svg%3E");
  }
  .scroll::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0h8L4 6z' fill='%239999CC'/%3E%3C/svg%3E");
  }
}
.head .title,
.mo-head .step .title,
.pf-title {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.rails {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sd-label {
  display: none;
}
.subframe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sub-col);
  grid-template-rows: calc(var(--sub-top) + var(--sub-extra, 0px)) var(--sub-bar) var(--sub-gap) var(--sub-bar) minmax(
      0,
      1fr
    );
  flex: 1;
  min-height: 0;
}
.subframe .sub-title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  margin-bottom: 14px;
  color: var(--sub-title);
  font-size: var(--type-md);
  letter-spacing: var(--track-title);
}
.subframe .stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.subframe .stack > div {
  color: var(--text-on-color);
  font-size: var(--type-xs);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 8px 3px;
  box-sizing: border-box;
}
.subframe .top {
  grid-column: 2;
  grid-row: 1 / 3;
}
.subframe .top > div {
  background: var(--sub-1);
}
.subframe .top > .a {
  height: calc(var(--sub-top) * 0.34);
  flex: none;
}
.subframe .top > .b {
  flex: 1;
  border-end-end-radius: var(--r-sub-outer);
  align-items: flex-start;
  padding-top: 3px;
}
.subframe .bottom {
  grid-column: 2;
  grid-row: 4 / 6;
  min-height: 0;
  overflow: hidden;
}
.subframe .bottom > .a {
  flex: 0 1 calc(var(--sub-bar) + var(--button) * 1.9);
  min-height: calc(var(--sub-bar) + var(--r-sub-outer));
  background: var(--sub-2);
  border-start-end-radius: var(--r-sub-outer);
}
.subframe .bottom > .b {
  flex: 0 0 calc(var(--button) * 0.3);
  background: var(--sub-3);
}
.subframe .bottom > .c {
  flex: 1 1 0;
  min-height: 0;
  background: var(--sub-3);
  align-items: flex-start;
  padding-top: 3px;
}
.subframe .cc {
  position: relative;
  grid-column: 1;
  width: var(--r-sub-inner);
  height: var(--r-sub-inner);
  justify-self: end;
}
.subframe .cc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
}
.subframe .cc.t {
  grid-row: 1;
  align-self: end;
  background: var(--sub-1);
}
.subframe .cc.t::after {
  border-end-end-radius: var(--r-sub-inner);
}
.subframe .cc.b {
  grid-row: 5;
  align-self: start;
  background: var(--sub-2);
}
.subframe .cc.b::after {
  border-start-end-radius: var(--r-sub-inner);
}
.subframe .bars {
  grid-column: 1;
  display: flex;
  gap: var(--gap);
}
.subframe .bars.one {
  grid-row: 2;
}
.subframe .bars.two {
  grid-row: 4;
}
.subframe .bars > div {
  height: 100%;
}
.subframe .bars > .grow {
  flex: 1;
}
.subframe .bars.one > .grow {
  background: var(--sub-1);
}
.subframe .bars.two > .grow {
  background: var(--sub-2);
}
.subframe .body {
  grid-column: 1;
  grid-row: 5;
  min-width: 0;
  min-height: 0;
  padding-block: 24px 8px;
  padding-inline: 0 calc(var(--r-sub-inner) + var(--inset));
}
.subframe.flip {
  direction: rtl;
}
.subframe.flip * {
  unicode-bidi: plaintext;
}
.subframe.flip > .body {
  direction: ltr;
  padding-inline: calc(var(--r-sub-inner) + var(--inset)) 0;
}
[data-anchor="right"] .subframe.flip {
  direction: ltr;
}
[data-anchor="right"] .subframe.flip > .body {
  direction: rtl;
}
.subframe .bar-divider {
  grid-column: 1;
  grid-row: 2 / 5;
  justify-self: start;
  margin-inline-start: 55%;
}
.m1-bracket {
  grid-column: 3 / 5;
  grid-row: 5;
  display: flex;
}
.m1-bracket .elbow {
  position: relative;
  flex: 0 0 calc(var(--m1-col) + var(--r-m1-foot-inner));
  background: var(--frame-primary);
  border-end-start-radius: var(--r-m1-foot-outer);
}
.m1-bracket .elbow::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--m1-col);
  inset-inline-end: 0;
  top: var(--m1-foot-thin);
  bottom: var(--m1-foot-thick);
  background: var(--bg);
  border-end-start-radius: var(--r-m1-foot-inner);
}
.m1-bracket .rails {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.m1-bracket .thin {
  height: var(--m1-foot-thin);
  background: var(--frame-primary);
  flex: none;
}
.m1-bracket .thick {
  height: var(--m1-foot-thick);
  display: flex;
  gap: var(--gap);
  flex: none;
}
.m1-bracket .thick > div {
  background: var(--frame-primary);
}
.m1-bracket .thick > .grow {
  flex: 1;
}
.m1-bracket .thick .num {
  background: none !important;
  color: var(--number);
  letter-spacing: var(--track-number);
}
.m1-bracket .thick .sd {
  background: none !important;
  color: var(--frame-secondary);
  letter-spacing: var(--track-title);
}
.m1-bracket .inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  --ro: calc(var(--header) * 0.3);
  padding-inline-start: calc(var(--header) * 0.4);
}
.m1-bracket .inner > * {
  flex: none;
  height: var(--ro);
}
.m1-bracket .inner .pill {
  min-width: 0;
  width: calc(var(--ro) * 2.3);
  padding: 0;
  border-radius: var(--r-pill-x) / 999px;
  background: var(--frame-tertiary);
}
.m1-bracket .inner .pill.end {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.m1-bracket .inner .tk {
  width: calc(var(--ro) * 0.25);
  background: var(--frame-secondary);
}
.m1-bracket .inner .n {
  color: var(--number);
  letter-spacing: var(--track-number);
  padding: 0;
}
.m1-bracket .inner .bx {
  width: calc(var(--ro) * 1.6);
  background: var(--frame-tertiary);
}
.m1-bracket .inner .long {
  flex: 0 1 calc(var(--header) * 4.5);
  min-width: 0;
  background: var(--frame-secondary);
}
.mo {
  display: grid;
  min-height: 0;
  --mo-right: calc(var(--mo-side-gap) + var(--mo-panels) + var(--mo-end));
  grid-template-columns: var(--mo-bank) var(--mo-bank-gap) minmax(0, 1fr) var(--mo-side-gap) var(--mo-panels) var(
      --mo-end
    );
  grid-template-rows: var(--mo-hood) var(--sub-gap) minmax(0, 1fr) var(--title-gap) var(--mo-foot);
}
.mo-head {
  grid-column: 3 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
}
.mo-head .hood {
  flex: 1;
  min-width: 0;
  height: var(--mo-hood);
  background: var(--frame-primary);
  border-start-start-radius: var(--r-mo-hood);
}
.mo-head .step {
  position: relative;
  flex: 0 0 var(--mo-right);
  height: var(--header);
  display: flex;
  gap: var(--title-gap);
}
.mo-head .step::before,
.mo-head .step::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: var(--r-mo-step);
  height: var(--r-mo-step);
}
.mo-head .step::before {
  background: var(--frame-primary);
}
.mo-head .step::after {
  background: var(--bg);
  border-start-start-radius: var(--r-mo-step);
}
.mo-head .step .bar {
  flex: 1;
  min-width: calc(var(--header) * 0.4);
  background: var(--frame-primary);
}
.mo-head .step .title {
  color: var(--header-title);
  letter-spacing: var(--track-title);
  padding: 0;
}
.mo-head .step .cap {
  flex: none;
  width: calc(var(--header) * 0.9);
  background: var(--frame-primary);
  border-start-end-radius: var(--r-pill);
  border-end-end-radius: var(--r-pill);
}
.mo-main {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.mo-main .subframe {
  flex: 1;
}
.mo-main .subframe .bar-divider {
  margin-inline-start: 60%;
}
.mo {
  grid-template-columns: var(--mo-bank) var(--mo-bank-gap) minmax(0, 1fr) 0 0 0;
}
.mo-head .step {
  flex-basis: auto;
}
.mo-bracket {
  display: none;
}
.frame :is(.subframe .stack > div, .bf-side > i) {
  font-size: var(--panel-id);
  font-weight: var(--panel-id-weight);
}
.frame :is(.subframe .stack > div:not(.mo-backrow, .d), .bf-side > i):not(#_) {
  line-height: calc(var(--cap-ratio) * 1em);
  padding: var(--pid-v, 4px) var(--pid-h, 5px);
  box-sizing: border-box;
}
.sd.bar-text,
.js-clock,
.js-sd {
  font-weight: 600;
}
:is(.head .title, .mo-head .step .title, .pf-title) {
  font-family: var(--font-header);
}
.frame .id-off {
  color: transparent !important;
}
.mo[data-divider="off"] .subframe {
  grid-template-rows: 0 0 0 0 minmax(0, 1fr);
}
.mo[data-divider="off"] .subframe > :is(.sub-title, .cascade, .cc, .stack.top, .bars, .bar-divider) {
  display: none;
}
.mo[data-divider="off"] .subframe .bottom > .a {
  border-radius: 0;
}
.mo .subframe > .mo-top {
  display: none;
}
.mo[data-top] .subframe {
  grid-template-rows: minmax(calc(var(--sub-top) + var(--sub-extra, 0px)), auto) var(--sub-bar) var(--sub-gap) var(
      --sub-bar
    ) minmax(0, 1fr);
}
.mo[data-top][data-bio="hidden"] .subframe {
  grid-template-rows: auto var(--sub-bar) var(--sub-gap) var(--sub-bar) minmax(0, 1fr);
}
.mo[data-top] .subframe > .cascade {
  display: none;
}
.mo .subframe.flip > .mo-top {
  direction: ltr;
}
.mo[data-anchor="right"] .subframe.flip > .mo-top {
  direction: rtl;
}
.mo[data-top] .subframe > .mo-top {
  display: block;
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin-block: 6px var(--margin);
  margin-inline: calc(var(--r-sub-inner) + var(--inset)) 0;
}
.mo .stack.bottom > :is(.mo-backrow, .d, .mo-nav) {
  display: none;
}
.mo .stack.bottom > .mo-nav {
  display: flex;
}
.mo[data-back] .stack.bottom > :is(.mo-backrow, .d) {
  display: grid;
}
.mo .stack.bottom {
  --nav-h: calc(var(--sub-col) * 0.6);
  --back-h: calc(var(--sub-col) * 1.9);
  --notch-r: calc(var(--sub-col) * 0.16);
}
.mo .stack.bottom > :is(.mo-back, .mo-nav),
.mo .mo-backrow > button {
  font: inherit;
  border: 0;
  cursor: pointer;
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 14px;
  line-height: 1;
  padding: 0 6px 4px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-sizing: border-box;
}
.mo .stack.bottom > .mo-nav {
  flex: 0 0 var(--nav-h);
  background: var(--c-rust);
}
.mo .stack.bottom > .mo-nav[aria-disabled="true"] {
  background: var(--unable);
}
.mo .stack.bottom > .mo-backrow {
  position: relative;
  flex: 0 1 calc(var(--back-h) * clamp(0, var(--bp) - 1, 1));
  min-height: calc(var(--nav-h) * clamp(0, var(--bp) - 1, 1));
  margin-block: calc(
    var(--gap) * -1 + (3px * clamp(0, (var(--bp) - 0.8) / 0.2, 1) + 3px * clamp(0, var(--bp) - 1, 1)) / 2
  );
  grid-template-columns: minmax(0, 1fr) 3px calc(var(--sub-col) * 0.74);
  column-gap: var(--gap);
  padding: 0;
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
}
.mo .stack.bottom > .mo-backrow::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1.5px;
  height: calc(3px * (1 - clamp(0, (var(--bp) - 0.8) / 0.2, 1)));
  inset-inline-start: 0;
  background: var(--bg);
  pointer-events: none;
  width: calc(100% * clamp(0, (var(--bp) - 0.2) / 0.8, 1));
}
.mo .mo-backrow > :is(i, button) {
  overflow: hidden;
  opacity: clamp(0, (var(--bp) - 1) * 5, 1);
}
.mo .mo-backrow > i {
  grid-column: 2;
  background: var(--c-gold);
}
.mo .mo-backrow > button {
  grid-column: 3;
  background: var(--c-red);
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mo .stack.bottom > .d {
  background: var(--sub-3);
}
.mo[data-back] .stack.bottom > .c {
  border-end-start-radius: calc(var(--notch-r) * min(1, var(--bp) / 0.4));
  flex: 1 1 max(0px, calc(var(--nav-h) * 2 - var(--sub-bar) - var(--button) * 2.2));
}
.mo[data-back] .stack.bottom > .d {
  border-start-start-radius: calc(var(--notch-r) * min(1, var(--bp) / 0.4));
  flex: 1 1 max(0px, calc(var(--sub-bar) + var(--button) * 2.2 - var(--nav-h) * 2));
  min-height: 0;
}
@property --bp {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@keyframes mo-back-open {
  0% {
    --bp: 0;
    animation-timing-function: ease-in-out;
  }
  50% {
    --bp: 1;
    animation-timing-function: ease-in-out;
  }
  100% {
    --bp: 2;
  }
}
@keyframes mo-back-close {
  0% {
    --bp: 2;
    animation-timing-function: ease-in-out;
  }
  50% {
    --bp: 1;
    animation-timing-function: ease-in-out;
  }
  100% {
    --bp: 0;
  }
}
.mo[data-back] .stack.bottom {
  animation: mo-back-open 0.6s both;
}
.mo[data-back][data-closing] .stack.bottom {
  animation-name: mo-back-close;
}
@media (prefers-reduced-motion: reduce) {
  .mo[data-back] .stack.bottom,
  .mo[data-back][data-closing] .stack.bottom {
    animation: none;
  }
}
.mo .stack.bottom > :is(.mo-mainops, .mo-me),
.mo .stack.top > :is(.mo-mainops, .mo-me) {
  display: none;
}
.mo:not([data-top]) .stack.bottom > :is(.mo-mainops, .mo-me),
.mo[data-top] .stack.top > :is(.mo-mainops, .mo-me) {
  display: flex;
  flex: 0 0 35px;
  background: var(--c-blue-light);
  font: inherit;
  border: 0;
  cursor: pointer;
  color: var(--text-on-color);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: 14px;
  line-height: calc(var(--cap-ratio) * 1em);
  padding: 0 5px 4px;
  align-items: flex-end;
  justify-content: flex-start;
  box-sizing: border-box;
}
.mo .stack > .mo-me:not(#_) {
  background: var(--c-lilac);
}
.mo {
  --m1-foot-thin: 8px;
  --m1-foot-thick: 22px;
  --m1-bracket: 70px;
  grid-template-rows: var(--mo-hood) var(--gap) minmax(0, 1fr) 5px var(--m1-bracket);
}
.mo .subframe.flip > .body {
  padding-bottom: 5px;
}
.mo {
  grid-template-columns: 0 0 minmax(0, 1fr) 0 0 0;
  grid-template-rows: var(--mo-hood) var(--gap) minmax(0, 1fr) var(--sub-gap) var(--m1-bracket);
  --mo-drop: calc(var(--mo-hood) + var(--gap) - var(--header));
}
.mo-head .hood {
  flex: 0 0 var(--sub-col);
}
.mo-head .step {
  flex: 1 1 auto;
}
.mo-bracket {
  display: flex;
  grid-column: 3 / -1;
  grid-row: 5;
  --m1-col: var(--sub-col);
}
.mo .subframe .cascade {
  margin-block: calc(var(--margin) - var(--mo-drop)) var(--margin);
  margin-inline-end: var(--margin);
}
.mo[data-top] .subframe > .mo-top {
  margin-block: calc(var(--margin) - var(--mo-drop)) var(--margin);
  margin-inline: var(--margin) 0;
}
.mo .subframe.flip > .body {
  padding-top: var(--margin);
  padding-inline-start: var(--margin);
}
.mo:is([data-divider="off"], [data-divider="read"]) .subframe.flip > .body {
  padding-top: 0;
  margin-top: calc(var(--margin) - var(--mo-drop));
}

.pill {
  height: 34px;
  padding-block: 0;
  padding-inline: 28px 17px;
  border-radius: var(--r-pill-x) / 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  min-width: 120px;
  color: var(--text-on-color);
  font-size: var(--type-sm);
  letter-spacing: var(--track-label);
}
.pill.end {
  border-radius: 0;
  border-start-end-radius: var(--r-pill);
  border-end-end-radius: var(--r-pill);
}