/* Grey - Element. Generated by `mkgreytheme --element`; do not hand-edit.
 *
 * Unlayered on purpose. Element declares
 *   @layer compound-tokens, compound-web, shared-components, app-web;
 * and an unlayered declaration beats every layered one regardless of
 * specificity, so none of this needs !important.
 */

/* The primitive ramps. Repaint these and the ~415 semantic tokens that
   resolve through them follow. gray -> the ground-tinted ladder (2.3),
   green -> teal, because Element's accent paints furniture (2.2).
   red/orange/yellow are semantic (2.6) and lime/cyan/fuchsia/purple/pink
   carry per-user identity (2.7); neither is touched. */
.cpd-theme-dark.cpd-theme-dark, :root {
  --cpd-color-alpha-blue-100: #201820;
  --cpd-color-alpha-blue-200: #211921;
  --cpd-color-alpha-blue-300: #282028;
  --cpd-color-alpha-blue-400: #2d282d;
  --cpd-color-alpha-blue-500: rgba(80,77,80,.63);
  --cpd-color-alpha-blue-600: rgba(112,110,112,.53);
  --cpd-color-alpha-blue-700: rgba(118,116,118,.64);
  --cpd-color-alpha-blue-800: rgba(129,126,129,.84);
  --cpd-color-alpha-blue-900: rgba(148,146,148,.92);
  --cpd-color-alpha-blue-1000: rgba(161,160,161,.94);
  --cpd-color-alpha-blue-1100: rgba(176,175,176,.96);
  --cpd-color-alpha-blue-1200: rgba(198,198,198,.97);
  --cpd-color-alpha-blue-1300: rgba(223,223,223,.99);
  --cpd-color-alpha-blue-1400: #eeeeee;
  --cpd-color-alpha-gray-100: rgba(219,219,219,.02);
  --cpd-color-alpha-gray-200: rgba(204,204,204,.04);
  --cpd-color-alpha-gray-300: rgba(225,225,225,.06);
  --cpd-color-alpha-gray-400: rgba(234,234,234,.1);
  --cpd-color-alpha-gray-500: rgba(247,247,247,.15);
  --cpd-color-alpha-gray-600: rgba(239,239,239,.2);
  --cpd-color-alpha-gray-700: rgba(240,240,240,.27);
  --cpd-color-alpha-gray-800: rgba(236,236,236,.41);
  --cpd-color-alpha-gray-900: rgba(237,237,237,.54);
  --cpd-color-alpha-gray-1000: rgba(236,236,236,.61);
  --cpd-color-alpha-gray-1100: rgba(239,239,239,.68);
  --cpd-color-alpha-gray-1200: rgba(243,243,243,.79);
  --cpd-color-alpha-gray-1300: rgba(246,246,246,.89);
  --cpd-color-alpha-gray-1400: rgba(249,249,249,.95);
  --cpd-color-alpha-green-100: #001f12;
  --cpd-color-alpha-green-200: #001f12;
  --cpd-color-alpha-green-300: #002416;
  --cpd-color-alpha-green-400: #002e1d;
  --cpd-color-alpha-green-500: #003d28;
  --cpd-color-alpha-green-600: #00472f;
  --cpd-color-alpha-green-700: #005d3f;
  --cpd-color-alpha-green-800: #007b55;
  --cpd-color-alpha-green-900: rgba(81,250,184,.58);
  --cpd-color-alpha-green-1000: rgba(82,251,185,.65);
  --cpd-color-alpha-green-1100: rgba(81,250,184,.74);
  --cpd-color-alpha-green-1200: rgba(127,255,199,.83);
  --cpd-color-alpha-green-1300: rgba(190,255,223,.91);
  --cpd-color-alpha-green-1400: rgba(224,254,238,.96);
  --cpd-color-blue-100: #1f171f;
  --cpd-color-blue-200: #211921;
  --cpd-color-blue-300: #271f27;
  --cpd-color-blue-400: #2d282d;
  --cpd-color-blue-500: #393539;
  --cpd-color-blue-600: #434043;
  --cpd-color-blue-700: #535053;
  --cpd-color-blue-800: #6f6c6f;
  --cpd-color-blue-900: #8a888a;
  --cpd-color-blue-1000: #9a989a;
  --cpd-color-blue-1100: #abaaab;
  --cpd-color-blue-1200: #c2c2c2;
  --cpd-color-blue-1300: #dddddd;
  --cpd-color-blue-1400: #ededed;
  --cpd-color-gray-100: #1b141b;
  --cpd-color-gray-200: #1f171f;
  --cpd-color-gray-300: #241c24;
  --cpd-color-gray-400: #2b262b;
  --cpd-color-gray-500: #373337;
  --cpd-color-gray-600: #413d41;
  --cpd-color-gray-700: #504d50;
  --cpd-color-gray-800: #6d6a6d;
  --cpd-color-gray-900: #898789;
  --cpd-color-gray-1000: #999899;
  --cpd-color-gray-1100: #aaa9aa;
  --cpd-color-gray-1200: #c3c2c3;
  --cpd-color-gray-1300: #dddddd;
  --cpd-color-gray-1400: #eeeeee;
  --cpd-color-green-100: #001c10;
  --cpd-color-green-200: #001f12;
  --cpd-color-green-300: #002516;
  --cpd-color-green-400: #002e1d;
  --cpd-color-green-500: #003d28;
  --cpd-color-green-600: #004830;
  --cpd-color-green-700: #005b3d;
  --cpd-color-green-800: #007b55;
  --cpd-color-green-900: #009c6c;
  --cpd-color-green-1000: #00ae79;
  --cpd-color-green-1100: #00c287;
  --cpd-color-green-1200: #67d8a6;
  --cpd-color-green-1300: #b1eacd;
  --cpd-color-green-1400: #d7f5e5;
  --cpd-color-theme-bg: #171017;
}

/* Bible 4.2's six weights, for a client that cannot install a font.
   Second tier behind system "Iosevka" - see EL_WEBFONT. */
@font-face {
  font-family: "Iosevka Web";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(grey-fonts/iosevka-300.woff2) format("woff2");
}
@font-face {
  font-family: "Iosevka Web";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(grey-fonts/iosevka-400-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Iosevka Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(grey-fonts/iosevka-400.woff2) format("woff2");
}
@font-face {
  font-family: "Iosevka Web";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(grey-fonts/iosevka-500.woff2) format("woff2");
}
@font-face {
  font-family: "Iosevka Web";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(grey-fonts/iosevka-600.woff2) format("woff2");
}
@font-face {
  font-family: "Iosevka Web";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(grey-fonts/iosevka-700.woff2) format("woff2");
}

/* The aliases. Element asks for these by name in ~120 hardcoded
   declarations, so the family is redefined rather than the rules
   overridden - see EL_ALIAS. local() first, so a machine with the real
   Iosevka keeps its full glyph coverage and only the phone gets the
   226-glyph subset. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Iosevka Light"), url(grey-fonts/iosevka-300.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Iosevka Italic"), url(grey-fonts/iosevka-400-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Iosevka"), url(grey-fonts/iosevka-400.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Iosevka Medium"), url(grey-fonts/iosevka-500.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Iosevka Semibold"), url(grey-fonts/iosevka-600.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Iosevka Bold"), url(grey-fonts/iosevka-700.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Iosevka Light"), url(grey-fonts/iosevka-300.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Iosevka Italic"), url(grey-fonts/iosevka-400-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Iosevka"), url(grey-fonts/iosevka-400.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Iosevka Medium"), url(grey-fonts/iosevka-500.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Iosevka Semibold"), url(grey-fonts/iosevka-600.woff2) format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Iosevka Bold"), url(grey-fonts/iosevka-700.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Iosevka Light"), url(grey-fonts/iosevka-300.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Iosevka Italic"), url(grey-fonts/iosevka-400-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Iosevka"), url(grey-fonts/iosevka-400.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Iosevka Medium"), url(grey-fonts/iosevka-500.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Iosevka Semibold"), url(grey-fonts/iosevka-600.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Iosevka Bold"), url(grey-fonts/iosevka-700.woff2) format("woff2");
}

/* Bible 4.1: Iosevka everywhere. Monospace is part of the identity, not
   a code-editor default, so Element's sans token takes it too. The
   system face leads; the embedded subset only catches a machine that
   has no Iosevka to install, so nothing loses glyph coverage. */
.cpd-theme-dark.cpd-theme-dark, :root {
  --cpd-font-family-sans: "Iosevka", "Iosevka Web", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --cpd-font-family-mono: "Iosevka", "Iosevka Web", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* THE ONE AMBER: the composer. Bible 2.2 names the spotlight as "the
   person's own answers and nothing else", and in a chat client the
   composer is that role exactly - it is where the user's own words go.
   This was on the unread badge first; the composer has the better claim
   and two spotlights is none, so the badge below gives it up.

   Element ships the composer as `background-color: bg-canvas-default`
   with border-radius and NO border, over a wrapper whose border-top is
   `1px solid transparent`. It is not subtle, it is invisible: the field
   and the room behind it are the same colour with no edge between them.

   Amber at rest so the field is always findable; full glow plus a ring
   on focus-within, because the spotlight belongs on the thing you are
   actually using. The fill lifts one rung off the canvas so it reads as
   a surface rather than a hole. */
.mx_MessageComposer {
  background-color: #1f171f;
  border: 1px solid #f8b040;
}
.mx_MessageComposer:focus-within {
  border-color: #f8b040;
  box-shadow: 0 0 0 3px rgba(248,176,64,0.22);
}
/* The caret is the smallest possible instance of the same idea. */
.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
  caret-color: #f8b040;
}

/* The unread badge, which used to hold the amber. An unread count is the
   app telling you about itself, and 2.2 puts that on teal. Element paints
   it with Compound's Badge at data-kind=grey - deliberately quiet, so it
   was the rung with no colour to lose either way. The mention badge is
   data-kind=red and stays red: "someone said your name" is semantic
   (2.6), not decoration. Class hash moves every build, hence substring. */
[class*="_badge_"][data-kind="grey"] {
  background: #10d898;
  color: #241c24;
}

/* Bible 4.2, the weight scale. Compound defines exactly three weights -
   regular 400, medium 500, semibold 600 - so out of the box a sender
   name and the message under it are one step apart and read as the same
   voice. A sender name is the header of a message block, which is the
   700 row: 'the page title and section headers'. Message body stays 400,
   which Element already sets. Every one of these is a real Iosevka cut,
   never a synthesised weight. */
.mx_EventTile .mx_DisambiguatedProfile,
.mx_EventTile_sender,
.mx_DisambiguatedProfile > span:not(.mx_DisambiguatedProfile_mxid) {
  font-weight: 700;
}

/* The @user:server suffix beside a name is a disambiguation aside, not
   part of the name. Bible 4.2 puts asides on 300 Light. */
.mx_DisambiguatedProfile_mxid {
  font-weight: 300;
}

/* Icons. Compound's icon ladder was tuned against its own near-black
   canvas; read against the plum ground, gray-800 lands at 3.5:1 and
   gray-900 at 5.3:1 - controls that look like smudges. Each rung moves
   UP THE SAME LADDER, so the hierarchy Compound built survives and no
   fourth hue appears (2.2's last line). tertiary 3.5 -> 8.0:1,
   secondary 5.3 -> 10.5:1.
   The text tokens are deliberately left where they are: they sit one
   rung apart on purpose, and lifting them would flatten the difference
   between a message and its timestamp. */
.cpd-theme-dark.cpd-theme-dark, :root {
  --cpd-color-icon-secondary: var(--cpd-color-gray-1200);
  --cpd-color-icon-tertiary: var(--cpd-color-gray-1100);
  --cpd-color-icon-quaternary: var(--cpd-color-gray-900);
  --cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-1200);
  --cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-1100);
  --cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-900);
  --cpd-color-icon-accent-primary: var(--cpd-color-green-1100);
  /* info-primary was blue-1100, which the flatten above turned into a
     plain grey - an icon that means "the app is telling you something"
     and now looks like every other icon. 2.2 files that under the page
     talking about itself, so it goes teal. critical stays red: red is
     semantic, not decorative. */
  --cpd-color-icon-info-primary: var(--cpd-color-green-1100);
}

/* Which icons get to be teal.

   Not all of them. Teal already carries meaning on this surface - the
   send button, the active space ring, the selected room, links, the
   unread badge - and twenty more teal icons would turn a signal into
   decoration. Not amber either: the composer holds this surface's one
   spotlight and 2.2 is explicit that two spotlights is none.

   So the split 2.2 already draws: an icon that is the app REPORTING
   STATE goes teal, an icon that is just a control stays on the grey
   ladder it was lifted onto above. Compound already moves a hovered
   icon to icon-primary - a state change it paints white; that is the
   app saying "this one is live", so it is teal instead. Same for the
   indicator dot, which exists only to say something is there.

   The hover selectors are READ off the live CSS by el_hover_icons()
   rather than listed - half of them are content-hashed and move every
   release, same as the ramps. */
._icon-button_1215g_8:not([aria-disabled=true]):hover * {
  color: var(--cpd-color-icon-accent-primary);
}
._icon-button_1215g_8:not([aria-disabled=true]):active * {
  color: var(--cpd-color-icon-accent-primary);
}
._action_1s836_24:hover {
  color: var(--cpd-color-icon-accent-primary);
}
._search_1lktl_8:hover ._icon_1lktl_37 {
  color: var(--cpd-color-icon-accent-primary);
}
._search_1lktl_8:active ._icon_1lktl_37 {
  color: var(--cpd-color-icon-accent-primary);
}
._addReactionButtonActive_9xpzm_57,._addReactionButton_9xpzm_29:focus-visible,._addReactionButton_9xpzm_29:hover {
  color: var(--cpd-color-icon-accent-primary);
}
._button_13lno_63:hover svg {
  color: var(--cpd-color-icon-accent-primary);
}
.mx_SpacePillButton:hover svg {
  color: var(--cpd-color-icon-accent-primary);
}
.mx_MessageComposer_button:hover svg {
  color: var(--cpd-color-icon-accent-primary);
}
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover svg {
  color: var(--cpd-color-icon-accent-primary);
}
.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_title .mx_IncomingCallToast_expandButton:hover {
  color: var(--cpd-color-icon-accent-primary);
}
[class*="_indicator-icon_"][data-indicator]:before {
  --background-color: var(--cpd-color-icon-accent-primary);
}

/* Two things blue was carrying that grey should not inherit.

   A link is the page pointing at something, which 2.2 files under
   furniture - and the blog already paints its links teal, so this is
   the same answer twice rather than a new decision.

   Focus rings are NOT given the glow, tempting as it is: the composer
   below already holds this surface's one amber, and 2.2 is explicit
   that two spotlights is none. They inherit blue-900, which the flatten
   above has already turned into a grey. */
.cpd-theme-dark.cpd-theme-dark, :root {
  --cpd-color-text-link-external: var(--cpd-color-green-1100);
}

/* The send button - the primary action of the whole app, and therefore
   the most furniture-ish thing on the page, so it takes the character's
   colour at full strength (2.2) instead of a dark rung of it. Element
   paints it with an ICON token used as a background, which lands on
   green-800: dark ink on dark teal, 3.1:1. INK on TEAL is 8.9:1 - the
   same figure 2.1 quotes for ink on the glow.

   The centring is a bug fix, not a preference. Element sizes the glyph
   with height/width:inherit on an INLINE svg, so it rides the text
   baseline; once the font became Iosevka the metrics moved and the
   plane dropped far enough to clip against the circle. A flex box
   centres it whatever the font underneath does. */
.mx_MessageComposer_sendMessage {
  background-color: #10d898;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}
.mx_MessageComposer_sendMessage svg {
  color: #241c24;
}

/* The space rail's expand/collapse toggle, which has the same disease.
   Element draws it as an 18px disc with the chevron KNOCKED OUT in the
   canvas colour rather than drawn on top - that part is theirs and is
   fine - but the glyph is again an inline svg at height/width:inherit,
   so it hangs off the text baseline. Under Iosevka it sits low and
   right of the disc and the arrow reads as a bite out of the edge
   instead of an arrow. Same fix as the send button: centre it in a
   flex box, and drop the +/-1px nudges, which only make sense as
   corrections to the inline positioning they replace. */
.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx_SpacePanel .mx_SpacePanel_toggleCollapse svg,
.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded svg {
  margin: 0;
}

/* Why the composer's amber border stops short on the right.

   It is a BORDER, not an outline, so it should close on all four
   sides. It does not, because Element gives the composer
   `width: 100%` AND `margin-right: 2px`. As a stretch item in a
   column flex container it was already the width of its parent, so
   the margin does not inset it - it pushes the border box 2px past
   the column that clips it, and the right border is drawn entirely
   outside the clip. Top and bottom survive but run to the clip edge
   and stop, which is what makes it read as an unfinished bracket.
   Measured on screen: strokes at x=481, y=925 and y=1004 spanning
   x 481-1599, and nothing whatever at x=1600.

   `width: auto` is the fix rather than `calc(100% - 2px)`: a stretch
   item sizes itself to the container MINUS its margins, so the 2px
   gap Element wanted is honoured and the box stops inside the clip.
   The bug was always there; it only became visible when the border
   stopped being transparent.

   The same rule also sets `padding-bottom: 1em`, which was Element's
   gap between the composer and the bottom of the room view. With no
   border that padding read as a gap; with one it is INSIDE the box,
   so the field gained a band of dead space along its bottom edge and
   the text and buttons appeared to hug the top. Measured: 19px above
   the ink, 37px below it - an 18px imbalance, which is the 1em. Moved
   to margin so the gap stays where Element wanted it, on the far side
   of the border. */
.mx_RoomView .mx_MessageComposer {
  width: auto;
  padding-bottom: 0;
  margin-bottom: 1em;
}

/* The space rail. Its icon is painted from a TEXT token, so the icon
   lift above cannot reach it, and an active space is ringed in
   text-primary - a white ring. Which space you are in is the app
   talking about itself, and 2.2 puts that on teal. */
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon svg {
  color: var(--cpd-color-icon-primary);
}
.mx_SpacePanel {
  --activeBorder-color: #10d898;
}

/* Sacred geometry. 1.3: this is structure, not decoration - the
   emblem and the measure are locked to each other, and half of what
   follows is the measure. Element hands the timeline the whole pane,
   which on this screen is a 1480px line; 5.1's column is what makes
   the lattice a frame the text hangs in rather than wallpaper behind
   it. Take the measure out and the emblem becomes decoration, which
   is the thing 1.3 forbids. */
/* The measure. Element already ships exactly this shape for its bubble
   layout - `margin: 0 auto; max-width: 1200px` on these same three
   children - so this is its own mechanism on 5.1's number, not a new
   one.

   The column is centred in the pane; the text inside it is not. 5.3:
   centred running prose gives every line a different start-x and the
   eye hunts instead of sweeping. Only the block moves. */
.mx_RoomView_timeline,
.mx_RoomView_statusArea,
.mx_RoomView .mx_MessageComposer {
  /* The column is derived from the STAR, not from the window. 3.4:
     the measure and the emblem scale to each other, and here it is
     the emblem that is pinned - it has to fit the pane's height. The
     star stands 2*sqrt(3)*U tall and the two vertical chords sit at
     +/-1U, so a column of 2U is framed by them exactly, and the
     star's left and right points land one column either side of
     centre: column = pane height / sqrt(3). cqh, because
     .mx_RoomView_body already declares `container-type: size` -
     Element's own container query hands us the pane's height with no
     script and no magic number. */
  max-width: calc(100cqh / 1.7320508);
  margin-inline: auto;
  /* The composer is a flex item; capped and centred it shrink-wraps
     to its buttons when the field is empty, so it is told to fill
     the cap. box-sizing keeps its border inside that width. */
  width: 100%;
  box-sizing: border-box;
}
.mx_RoomView_body {
  position: relative;
  /* The layer below is bigger than the pane so that turning it never
     swings an unpainted corner into view; this is what stops it
     showing up over the rails. `container-type: size` gives this
     element size, layout and style containment but NOT paint. */
  overflow: hidden;
}
/* 3.3, Element exception (2026-11-05, by Grey): a tiled Flower of
   Life, shadow on shadow - lines one rung below the room's ground
   (#130c13 on #171017), static. Texture by value, not pattern by contrast
   (5.6 addendum), so it sits behind the conversation without
   crossing it. One tile is U wide and sqrt(3)U tall, and the column
   is GEO_SYM circles across: U = column / 6, so the column's edges
   fall on circle centres (3.4's lock, kept). Centred on the pane,
   which is the column's centre. */
.mx_RoomView_body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Groove #130c13, rim #005b3d: the crop top's cut, teal rim on the ladder's
     700 rung (Grey picked it from a three-way preview). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1732' viewBox='0 0 1000.0 1732.1'%3E%3Cg fill='none' stroke='%23005b3d' stroke-width='128.0'%3E%3Ccircle cx='-2000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='0.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='-1500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='-500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='1500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='2500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='3500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='-2000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='0.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='-1500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='-500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='1500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='2500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='3500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='-2000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='0.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='-1500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='-500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='1500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='2500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='3500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='-2000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='0.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='3464.1' r='1000.0'/%3E%3C/g%3E%3Cg fill='none' stroke='%23130c13' stroke-width='96.0'%3E%3Ccircle cx='-2000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='0.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='-1732.1' r='1000.0'/%3E%3Ccircle cx='-1500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='-500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='1500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='2500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='3500.0' cy='-866.0' r='1000.0'/%3E%3Ccircle cx='-2000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='0.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='0.0' r='1000.0'/%3E%3Ccircle cx='-1500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='-500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='1500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='2500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='3500.0' cy='866.0' r='1000.0'/%3E%3Ccircle cx='-2000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='0.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='1732.1' r='1000.0'/%3E%3Ccircle cx='-1500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='-500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='1500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='2500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='3500.0' cy='2598.1' r='1000.0'/%3E%3Ccircle cx='-2000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='-1000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='0.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='1000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='2000.0' cy='3464.1' r='1000.0'/%3E%3Ccircle cx='3000.0' cy='3464.1' r='1000.0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: calc(100cqh / 1.7320508 / 6) calc(100cqh / 6);
  background-position: center center;
}
/* 5.4, the smoked-glass highlighter, as subtitles (Grey 2026-11-05):
   every line of text gets its own pane, so the lattice runs on
   between the lines. Values are the page template's --scrim and
   --hl-pad. Plain bodies go inline so each wrapped line is its own
   pane; formatted bodies hold block children, so each child gets
   one shrink-wrapped pane instead. */
.mx_RoomView_body {
  --grey-scrim: rgba(12, 9, 12, .58);
  --grey-hl-pad: .34em;
}
.mx_RoomView_body .mx_EventTile_body:not(.markdown-body),
.mx_RoomView_body .mx_DisambiguatedProfile,
.mx_RoomView_body .mx_TextualEvent,
.mx_RoomView_body .mx_GenericEventListSummary_summary,
.mx_RoomView_body .mx_TimelineSeparator > div {
  background: var(--grey-scrim);
  padding: .06em var(--grey-hl-pad);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mx_RoomView_body .mx_EventTile_body:not(.markdown-body) {
  display: inline;
}
.mx_RoomView_body .mx_DisambiguatedProfile {
  width: fit-content;
}
.mx_RoomView_body .mx_EventTile_body.markdown-body > :is(p, li, h1, h2, h3, h4, h5, h6, blockquote) {
  background: var(--grey-scrim);
  padding: .06em var(--grey-hl-pad);
  width: fit-content;
}
/* The grain, on the one box that does take a background: it spans the
   whole window with the two rails painted over it. */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
  background-attachment: fixed;
}
/* 5.6: the grain is the one thing allowed to repeat, because it is
   texture and there is no shape in it for the eye to lock onto. Fixed
   on every surface so its phase matches across the panes and the
   seams between them do not show. */
.mx_LeftPanel,
.mx_SpacePanel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
  background-attachment: fixed;
}

/* Interactive borders. See el_borders() for the derivation; the short
   version is that a Compound secondary button is canvas-coloured with one
   hairline around it, that hairline measured 1.75:1, and a control border
   is furniture so it goes on the teal ladder at the lowest rung clearing
   3.0:1 against this ground. */
.cpd-theme-dark.cpd-theme-dark, :root {
  --cpd-color-border-interactive-secondary: #007b55;   /* 3.53:1 */
  --cpd-color-border-interactive-primary: #009c6c;   /* 5.32:1 */
  --cpd-color-border-interactive-hovered: #00c287;   /* 8.07:1 */
}

/* The Create-a-space chooser. Its two cards bypass the button border
   token entirely: measured off a screenshot, the selected card is ringed
   in #eeeeee - flat white, gray-1400 - and the resting one in an alpha
   grey, while every other control in the same dialog had already gone
   teal. Which option is active is the app talking about itself, and 2.2
   puts that on teal - the same correction the space rail's white active
   ring needed. Scoped to the dialog by its un-hashed ancestor, because
   the cards' own classes are content-hashed and move every release.
   NOT amber: 2.2 allows exactly one spotlight per surface and the unread
   badge already holds it; two spotlights is none. */
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton,
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu [role="button"] {
  border-color: #007b55;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton:hover,
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu [role="button"]:hover,
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton:focus,
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu [role="button"]:focus,
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton[aria-checked="true"],
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu [role="button"][aria-checked="true"],
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton[aria-selected="true"],
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu [role="button"][aria-selected="true"] {
  border-color: #10d898;
}
/* The icons pick their colour from icon-primary/-tertiary, which is how
   one card read white and the other grey. Same rule, same answer. */
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton svg,
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu [role="button"] svg {
  color: #10d898;
}