.view-start .seal-start { margin-top: var(--seal-start-header); }
.seal-start-main h1 { margin-top: 20px !important; align-self: start; text-align: left; }
/* Header row: title left, seal boundary stacked to its right */
.seal-start-main { grid-template-rows: auto auto !important; align-content: center !important; gap: clamp(28px, 5vh, 56px) !important; }
.seal-start-main > header { display: flex !important; flex-wrap: wrap; align-items: flex-start !important; justify-content: space-between !important; gap: 16px 48px; }
.seal-start-boundary.boundary-top { flex: 0 1 460px; min-width: 280px; margin: 8px 0 0 !important; padding: 0 !important; border-top: 0 !important; display: block !important; }
.seal-start-boundary.boundary-top span { display: block; margin-bottom: 8px; }
.seal-start-boundary.boundary-top p { margin: 0; }
/* Cards centred in the remaining viewport */
.seal-start-grid { align-content: start !important; }
/* Route cards: rebuilt. Fill the grid row, no aspect-ratio, nothing clips. */
.seal-start-grid { align-items: stretch !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(16px, 1.6vw, 24px) !important; }
.seal-start-card { position: relative; aspect-ratio: auto !important; height: 100% !important; min-height: clamp(220px, 26vh, 300px) !important; align-self: stretch !important; overflow: hidden; display: flex !important; flex-direction: column !important; padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 30px) !important; border: 0 !important; box-shadow: none !important; border-radius: 18px !important; text-decoration: none !important; transition: transform 220ms ease, filter 220ms ease !important; }
.seal-start-card:hover { transform: translateY(-4px) !important; filter: brightness(1.04); }
/* Premium mandala pattern art, keyed off the seal QR motif */
.seal-start-card::before { content: ''; position: absolute; right: -16%; bottom: -30%; width: 76%; aspect-ratio: 1; background: url("assets/pattern/mandala-ink.svg") center / contain no-repeat; opacity: .09; pointer-events: none; z-index: 0; transition: transform 500ms cubic-bezier(.4,0,.2,1), opacity 400ms ease; }
.seal-start-card:hover::before { transform: rotate(12deg) scale(1.06); opacity: .16; }
.seal-start-asset::before { background-image: url("assets/pattern/mandala-paper.svg"); opacity: .1; }
.seal-start-asset:hover::before { opacity: .17; }
.seal-start-card > * { position: relative; z-index: 1; }
.seal-start-kind-icon { display: none !important; }
.seal-start-card .seal-start-code { position: static !important; font: 600 11px "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .2em !important; text-transform: uppercase !important; }
.seal-start-card .seal-start-copy { position: static !important; margin: auto 0 !important; display: block !important; padding: 0 !important; min-width: 0; }
.seal-start-card .seal-start-copy strong { display: block; font-size: clamp(30px, 2.4vw, 46px) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; font-weight: 700 !important; white-space: pre; max-width: 100%; }
.seal-start-card .seal-start-copy p { font-size: 13.5px !important; line-height: 1.5 !important; max-width: 38ch; margin: 12px 0 0 !important; opacity: 1; transform: none; }

.seal-start-card .seal-start-copy footer { display: block !important; position: absolute; right: clamp(20px, 2vw, 30px); bottom: clamp(18px, 1.8vw, 26px); }
.seal-start-card .seal-start-copy footer i { font-size: 26px; font-style: normal; transition: transform 220ms ease; }
.seal-start-card .seal-start-copy footer i b { font-weight: 400 !important; }
.seal-start-card:hover .seal-start-copy footer i { transform: translateX(6px); }
/* All route cards share the bright paper card treatment (card 01) */
.seal-start-asset, .seal-start-work, .seal-start-cause, .seal-start-community { background: #f8f5ee !important; }
.seal-start-asset::before { background-image: url("assets/pattern/mandala-ink.svg"); opacity: .09; }
.seal-start-asset .seal-start-code, .seal-start-work .seal-start-code, .seal-start-cause .seal-start-code, .seal-start-community .seal-start-code { color: rgba(10, 20, 8, .55) !important; }
.seal-start-asset strong, .seal-start-work strong, .seal-start-cause strong, .seal-start-community strong { color: #0a1408 !important; }
.seal-start-asset p, .seal-start-work p, .seal-start-cause p, .seal-start-community p { color: rgba(10, 20, 8, .65) !important; }
.seal-start-asset footer i b, .seal-start-work footer i b, .seal-start-cause footer i b, .seal-start-community footer i b { color: #0a1408 !important; }
/* Light register: this page follows the home palette. Bright paper first, not dark. */
html, body { background: var(--campaign-paper, #f2efe8) !important; }
.view-start { background: var(--campaign-paper, #f2efe8) !important; }
.seal-start {
  color: #0a1408 !important;
  background:
    linear-gradient(rgba(10, 20, 8, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 20, 8, .045) 1px, transparent 1px),
    var(--campaign-paper, #f2efe8) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
}
.seal-start-main h1 { color: #0a1408 !important; }
.seal-start-account { color: #0a1408 !important; }
.seal-start-account > span:first-child { background: rgba(10, 20, 8, .18) !important; }
.seal-start-account.is-connected > span:first-child { background: #4f8a10 !important; }
.seal-start-account small { color: rgba(10, 20, 8, .55) !important; }
.seal-start-account b { color: #0a1408 !important; }
.seal-start-account em { color: rgba(10, 20, 8, .5) !important; }
.seal-start-account i { color: rgba(10, 20, 8, .6) !important; }
.seal-start-boundary > span { color: rgba(10, 20, 8, .55) !important; }
.seal-start-boundary p { color: rgba(10, 20, 8, .62) !important; }
.seal-start-rail { color: #0a1408 !important; background: rgba(10, 20, 8, .05) !important; }
/* Card definition on paper: light cards need an edge, the dark asset card already has one */
.seal-start-card { border: 1px solid rgba(10, 20, 8, .08) !important; box-shadow: 0 14px 34px rgba(10, 20, 8, .07) !important; }

/* Dark register. The toggle's other state, ink instead of paper. The header
   and the Genesis card already carry a dark register, inherited from
   app/banking-sharp.css, everything else on this page was only ever
   written once, in the light register above, so the toggle changed two
   things and left the rest on paper. This block gives every one of those
   remaining elements the counterpart it was missing. */
html:not(.se-bright) { background: #0c1512 !important; }
html:not(.se-bright) body { background: #0c1512 !important; }
html:not(.se-bright) .view-start { background: #0c1512 !important; }
html:not(.se-bright) .seal-start {
  color: #f4f7f5 !important;
  background:
    linear-gradient(rgba(244, 247, 245, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 247, 245, .05) 1px, transparent 1px),
    #0c1512 !important;
  background-size: 48px 48px, 48px 48px, auto !important;
}
html:not(.se-bright) .seal-start-main h1 { color: #f4f7f5 !important; }
html:not(.se-bright) .seal-start-boundary > span { color: rgba(244, 247, 245, .5) !important; }
html:not(.se-bright) .seal-start-boundary p { color: rgba(244, 247, 245, .6) !important; }
html:not(.se-bright) .seal-start-rail { color: #f4f7f5 !important; background: rgba(244, 247, 245, .05) !important; }
html:not(.se-bright) .seal-start-card { border: 1px solid rgba(244, 247, 245, .08) !important; box-shadow: 0 18px 44px rgba(6, 19, 17, .3) !important; }
html:not(.se-bright) .seal-start-asset, html:not(.se-bright) .seal-start-work, html:not(.se-bright) .seal-start-cause, html:not(.se-bright) .seal-start-community { background: #121b17 !important; }
html:not(.se-bright) .seal-start-asset .seal-start-code, html:not(.se-bright) .seal-start-work .seal-start-code, html:not(.se-bright) .seal-start-cause .seal-start-code, html:not(.se-bright) .seal-start-community .seal-start-code { color: rgba(244, 247, 245, .5) !important; }
html:not(.se-bright) .seal-start-asset strong, html:not(.se-bright) .seal-start-work strong, html:not(.se-bright) .seal-start-cause strong, html:not(.se-bright) .seal-start-community strong { color: #f4f7f5 !important; }
html:not(.se-bright) .seal-start-asset p, html:not(.se-bright) .seal-start-work p, html:not(.se-bright) .seal-start-cause p, html:not(.se-bright) .seal-start-community p { color: rgba(244, 247, 245, .62) !important; }
html:not(.se-bright) .seal-start-asset footer i b, html:not(.se-bright) .seal-start-work footer i b, html:not(.se-bright) .seal-start-cause footer i b, html:not(.se-bright) .seal-start-community footer i b { color: #f4f7f5 !important; }
html:not(.se-bright) .seal-start-lock { border-color: rgba(244, 247, 245, .28) !important; color: rgba(244, 247, 245, .6) !important; }
html:not(.se-bright) .se-fastpass { border-color: rgba(244, 247, 245, .16) !important; background: rgba(18, 27, 23, .92) !important; color: #f4f7f5 !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .35) !important; }
html:not(.se-bright) .se-fastpass:hover, html:not(.se-bright) .se-fastpass:focus-visible { background: #16211c !important; box-shadow: 0 14px 32px rgba(0, 0, 0, .42) !important; }

/* Slot 01, the operator's sealed artifact.

   The card reuses the dark market row that already exists in the system:
   app/banking-sharp.css carries that register for the exchange board, the
   profile seal list and the witness phone, and .seal-start-artifact has been
   added to those same context lists. Nothing about the avatar ring, the
   symbol pill, the meta chips or the tier strip is restated here.

   What is restated is only what the card slot changes: the row stacks
   instead of running across, because it sits in a card footprint rather than
   in a list. The route cards around it are untouched. */
html body .seal-start-card.seal-start-artifact {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html body .seal-start-card.seal-start-artifact::before { content: none !important; }
/* Composition.

   The card is taller than its content, because its height is set by the route
   card beside it. Two ways to spend that: pin the rail to the floor and leave
   a void in the middle, or hold identity and rail together as one block and
   centre it. The second is what the design system asks for. Separation here
   is spacing, never a rule, which is also why there is no divider above the
   rail: app/banking-sharp.css strips one from this component on purpose. */
html body .seal-start-artifact .market-row.market-row {
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) clamp(16px, 1.5vw, 22px) !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  column-gap: clamp(16px, 1.5vw, 22px) !important;
  row-gap: clamp(17px, 1.6vw, 22px) !important;
  border-radius: 18px !important;
  cursor: pointer;
}
html body .seal-start-artifact .market-row-image {
  width: clamp(64px, 4.8vw, 82px) !important;
  height: clamp(64px, 4.8vw, 82px) !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}
html body .seal-start-card.seal-start-artifact .market-row-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: grid !important;
  gap: 7px !important;
}
/* Name and mark share a baseline, and the mark keeps its own line height so
   the pill does not ride above the cap. */
html body .seal-start-card.seal-start-artifact .market-row-main > span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex-wrap: wrap !important;
}
html body .seal-start-artifact .market-row-main b { font-size: clamp(18px, 1.35vw, 23px) !important; line-height: 1.1 !important; letter-spacing: -.03em !important; white-space: normal !important; }
html body .seal-start-card.seal-start-artifact .market-row-main em { font-size: 10.5px !important; letter-spacing: .14em !important; padding: 4px 9px !important; }
html body .seal-start-card.seal-start-artifact .market-row-main > small { margin-top: 0 !important; font-size: 13px !important; }
html body .seal-start-card.seal-start-artifact .market-row-meta { margin-top: 3px !important; gap: 6px !important; }
html body .seal-start-card.seal-start-artifact .market-row-meta i { padding: 5px 9px !important; border-radius: 7px !important; }

/* The rail is the floor of the card. */
/* The rail belongs to the text column, not to the card edge. Starting it
   under the avatar left the whole lower line hanging 91px to the left of the
   name it describes. */
html body .seal-start-card.seal-start-artifact .market-row.market-row .market-row-stats.market-row-stats {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 6px 22px !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The card in both registers.

   The Genesis card is one object with two designed treatments. Everything the
   dark market row gives it is inherited; what is set here is only what the
   register has to change, because the shared variant assumes the row sits on
   a dark page and this card sits on paper in both registers.

   Dark register: ink surface, light type, a hairline edge so the card reads
   as an object rather than a hole, and a ring seated on the ink.
   Bright register: white surface against the cream routes, ink type, and chip
   pills tinted in ink instead of the white the dark row uses, which is
   invisible on white. */

/* ---- dark register ---- */
html body .seal-start-card.seal-start-artifact .market-row.market-row {
  background: #101614 !important;
  border: 1px solid rgba(244, 247, 245, .09) !important;
  box-shadow: 0 18px 44px rgba(6, 19, 17, .22) !important;
}
html body .seal-start-card.seal-start-artifact .market-row-image img { border-color: #101614 !important; }
html body .seal-start-card.seal-start-artifact .market-row-meta i {
  background: rgba(244, 247, 245, .07) !important;
  color: rgba(244, 247, 245, .62) !important;
}
html body .seal-start-card.seal-start-artifact .market-row-meta i:first-child { color: #59dce8 !important; }
/* Measured on the ink surface: the inherited rgba(244, 247, 245, .4) rail
   came out at 3.64 to 1 at 9.5px against a 4.5 requirement. Foreground only. */
html body .seal-start-card.seal-start-artifact .market-row-stats .mrs-assets { color: rgba(244, 247, 245, .58) !important; }
html body .seal-start-card.seal-start-artifact:hover .market-row.market-row { border-color: rgba(89, 220, 232, .32) !important; }

/* ---- bright register ---- */
html.se-bright body .seal-start-card.seal-start-artifact .market-row.market-row {
  background: #ffffff !important;
  border: 1px solid rgba(11, 18, 16, .1) !important;
  box-shadow: 0 16px 40px rgba(11, 18, 16, .08) !important;
}
html.se-bright body .seal-start-card.seal-start-artifact .market-row-image img { border-color: #ffffff !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-main b { color: #0b1210 !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-main > small { color: rgba(11, 18, 16, .58) !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-meta i {
  background: rgba(11, 18, 16, .055) !important;
  color: rgba(11, 18, 16, .62) !important;
}
html.se-bright body .seal-start-card.seal-start-artifact .market-row-meta i:first-child { color: #0f6d72 !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-stats .mrs-tier.tier-seed.tier-seed { color: #0f7d55 !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-stats .mrs-tier.tier-bloom.tier-bloom { color: #2563d6 !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-stats .mrs-tier.tier-root.tier-root { color: #6d4fd6 !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-stats .mrs-quote.mrs-quote { color: rgba(11, 18, 16, .78) !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-stats .mrs-assets.mrs-assets { color: rgba(11, 18, 16, .58) !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-stats .mrs-quote u.up.up { color: #0f7a86 !important; }
html.se-bright body .seal-start-card.seal-start-artifact .market-row-stats .mrs-quote u.down.down { color: #b4500f !important; }
html.se-bright body .seal-start-card.seal-start-artifact:hover .market-row.market-row { border-color: rgba(15, 109, 114, .38) !important; }

/* The tier strip, coloured to the supplied reference.

   These five values are not new. They are the exchange board's own tokens
   from app/banking-sharp.css lines 695 to 700. They are restated here
   because the shared block that should carry them into the dark row,
   app/banking-sharp.css line 809 onward, is malformed: every rule in it
   reads ".pf .pf-seal-list .market-row-stats, .witness-phone .pf-seal-list
   .market-row-stats .mrs-tier.tier-root", and the comma splits the first
   half off as its own selector. The result is that the whole strip takes the
   muted colour and the tier, quote and change colours only ever reach the
   witness phone. profile.html renders grey for the same reason. Repairing
   those twenty eight selectors would change the profile and the witness
   phone as well, so it is not done here. */
html body .seal-start-artifact .market-row-stats .mrs-tier.tier-seed { color: #34d399 !important; }
html body .seal-start-artifact .market-row-stats .mrs-tier.tier-bloom { color: #60a5fa !important; }
html body .seal-start-artifact .market-row-stats .mrs-tier.tier-root { color: #a78bfa !important; }
html body .seal-start-artifact .market-row-stats .mrs-quote { color: rgba(244, 247, 245, .8) !important; }
html body .seal-start-artifact .market-row-stats .mrs-quote u { text-decoration: none !important; margin-left: 4px; }
html body .seal-start-artifact .market-row-stats .mrs-quote u.up { color: #59dce8 !important; }
html body .seal-start-artifact .market-row-stats .mrs-quote u.down { color: #ff8a42 !important; }

/* Locked routes. The card keeps its footprint and its type so the grid does
   not move when Genesis is sealed; only the register changes. Taken out of
   the pointer and tab order so the card cannot be activated. */
html body .seal-start-card.is-locked {
  pointer-events: none !important;
  cursor: default !important;
  filter: grayscale(1) !important;
  opacity: .55 !important;
  box-shadow: none !important;
}
html body .seal-start-card.is-locked:hover { transform: none !important; filter: grayscale(1) !important; }
html body .seal-start-card.is-locked .seal-start-copy footer { display: none !important; }
html body .seal-start-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 11px;
  border: 1px dashed rgba(10, 20, 8, .28);
  border-radius: 999px;
  font: 600 10px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(10, 20, 8, .6);
}
html body .seal-start-lock::before {
  content: "";
  width: 9px;
  height: 11px;
  flex: none;
  border: 1.6px solid currentColor;
  border-radius: 2px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: inset 0 3px 0 -1.6px currentColor;
}

/* The reference sets the meta chips in caps. */
html body .seal-start-artifact .market-row-meta i {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px !important;
}

/* Terminal session gate. Enter Terminal takes the account slot's place
   until the session flag is set, styled with the header's own existing
   is-access treatment rather than a new one. Fast Pass is a separate,
   clearly-marked demo shortcut for the same transition, pinned to the page
   corner so it never reads as part of the core flow. */
.terminal-enter { width: 100%; }
/* Declared Markets and Coherence Networks sit behind the terminal too.
   Not logged in, they render as the same nav slot but inert, so the only
   live moves on this page stay Start Sealing and Enter Terminal. */
.terminal-command.is-locked {
  cursor: not-allowed;
  opacity: .42;
}
.terminal-command.is-locked:hover,
.terminal-command.is-locked:focus-visible {
  color: var(--terminal-text);
  background: var(--terminal-surface);
  outline: none;
}
.terminal-command.is-locked:hover > small,
.terminal-command.is-locked:focus-visible > small,
.terminal-command.is-locked:hover em,
.terminal-command.is-locked:focus-visible em,
.terminal-command.is-locked:hover > i,
.terminal-command.is-locked:focus-visible > i {
  color: inherit;
}
.terminal-command.is-locked:hover > i,
.terminal-command.is-locked:focus-visible > i {
  transform: none;
}
.se-fastpass {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10, 20, 8, .16);
  background: rgba(248, 245, 238, .92);
  backdrop-filter: blur(8px);
  font: 700 10.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0a1408;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(10, 20, 8, .12);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.se-fastpass:hover, .se-fastpass:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(10, 20, 8, .16); background: #fff; outline: none; }
.se-fastpass i { font-style: normal; font-size: 13px; color: #a78bfa; }

/* carried from the start page body, unchanged */
.se-gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(10,20,8,.45); backdrop-filter: blur(3px); }
    .se-gate-panel { position: relative; width: min(560px,100%); border-radius: 18px; padding: clamp(24px,3vw,40px); background: #f8f5ee; color: #0a1408; border: 1px solid rgba(10,20,8,.08); box-shadow: 0 24px 60px rgba(10,20,8,.25); }
    .se-gate-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 22px; line-height: 1; color: rgba(10,20,8,.55); cursor: pointer; }
    .se-gate-eyebrow { font: 600 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .2em; color: rgba(10,20,8,.55); }
    .se-gate-panel h2 { margin: 10px 0 6px; font-size: clamp(26px,3vw,34px); letter-spacing: -.02em; }
    .se-gate-sub { margin: 0 0 22px; font-size: 13.5px; line-height: 1.5; color: rgba(10,20,8,.65); max-width: 46ch; }
    .se-gate-rails { display: grid; grid-template-columns: 1fr; gap: 18px; }
    .se-gate-rail { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: rgba(10,20,8,.04); }
    .se-gate-code { font: 600 10px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .2em; color: rgba(10,20,8,.55); }
    .se-gate-action { border: 0; border-radius: 8px; padding: 13px 14px; background: #0a1408; color: #f8f5ee; font: 700 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; cursor: pointer; }
    .se-gate-action:hover { filter: brightness(1.15); }
    .se-gate-input { border: 1px solid rgba(10,20,8,.18); border-radius: 8px; padding: 11px 12px; font-size: 13px; background: #fff; color: #0a1408; }
    .se-gate-rail small { font-size: 11.5px; line-height: 1.45; color: rgba(10,20,8,.55); }
    .se-gate-msg { margin: 16px 0 0; font: 600 12px "JetBrains Mono", ui-monospace, monospace; color: #6b4a00; }
    .se-gate-genesis { display: inline-block; margin-top: 18px; font-size: 12.5px; color: rgba(10,20,8,.7); text-decoration: underline; }
    html:not(.se-bright) .se-gate-panel { background: #101b16; color: #f4f7f5; border-color: rgba(244,247,245,.1); }
    html:not(.se-bright) .se-gate-sub, html:not(.se-bright) .se-gate-rail small, html:not(.se-bright) .se-gate-genesis { color: rgba(244,247,245,.6); }
    html:not(.se-bright) .se-gate-eyebrow, html:not(.se-bright) .se-gate-code, html:not(.se-bright) .se-gate-close { color: rgba(244,247,245,.55); }
    html:not(.se-bright) .se-gate-rail { background: rgba(244,247,245,.06); }
    html:not(.se-bright) .se-gate-action { background: #f4f7f5; color: #0c1512; }
    html:not(.se-bright) .se-gate-input { background: rgba(244,247,245,.08); color: #f4f7f5; border-color: rgba(244,247,245,.2); }
    html:not(.se-bright) .se-gate-msg { color: #e5c268; }
    @media (max-width: 700px) { .se-gate-rails { grid-template-columns: 1fr; } }