/* Shared by every page: tokens, the header with its menu and account controls, buttons, fields,
   notices, dialogs, the notification toast and the footer. The page scripts (site-nav.js and each
   page's own) are older than this design, so the class names here are the ones those scripts
   render. */
:root {
  --bg: #06080b;
  --ink: #eef2f6;
  --ink-dim: #a3aebb;
  --ink-faint: #67737f;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .24);
  --accent: #2f9dff;
  /* The colour of the family in view. Set from script as the camera reaches each core. */
  --family: var(--accent);
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(20px, 4.4vw, 64px);
  /* The chat and admin layouts count on this height (78px, and 68px on narrower windows). */
  --header: 78px;
}
@media (max-width: 1360px) {
  :root { --header: 68px; }
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
[hidden] { display: none !important; }

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--header);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: border-color .3s ease;
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .top { gap: 12px; }
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 800 15px/1 var(--sans);
  font-stretch: 125%;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mark img { display: block; width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }
.top-links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.top-links a {
  display: inline-flex;
  align-items: center;
  color: var(--ink-dim);
  text-decoration: none;
  font: 500 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.top-links a:hover,
.top-links a:focus-visible,
.top-links a[aria-current="page"] { color: var(--ink); outline: none; }
/* On the full-width header the destinations stand on the header's rule, and the page you are on,
   or the one under the pointer, is underlined in white: the same moving line as the section
   tabs, whose line is blue. Arriving on a page, its line draws itself. In the menu of narrower
   screens the links are a list and have no line. */
@media (min-width: 1400px) {
  .top-links { align-self: stretch; }
  .top-links a { position: relative; align-self: stretch; }
  .top-links a::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  .top-links a:hover::after,
  .top-links a:focus-visible::after,
  .top-links a[aria-current="page"]::after { transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes nav-line-in { from { transform: scaleX(0); } }
    .arriving .top-links a[aria-current="page"]::after { animation: nav-line-in .7s var(--ease) backwards .12s; }
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.button-solid { background: var(--ink); color: #06080b; }
.button-solid:hover,
.button-solid:focus-visible { background: var(--family); outline: none; }
.button-line { border-color: var(--line-strong); background: rgba(6, 8, 11, .4); color: var(--ink); }
.button-line:hover,
.button-line:focus-visible { border-color: var(--ink); outline: none; }
.button .arrow { transition: transform .25s var(--ease); }
.button:hover .arrow,
.button:focus-visible .arrow { transform: translateX(5px); }

/* The button classes shop.js emits, mapped onto the two button styles of this design. */
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { background: var(--ink); color: #06080b; }
.button-primary:hover:not(:disabled),
.button-primary:focus-visible { background: var(--accent); outline: none; }
.button-ghost { border-color: var(--line-strong); background: #0a0d12; color: var(--ink); }
.button-ghost:hover:not(:disabled),
.button-ghost:focus-visible { border-color: var(--ink); outline: none; }
.button-discord { background: #5865f2; color: #fff; }
.button-discord:hover,
.button-discord:focus-visible { background: #6f7bff; outline: none; }
.button-danger { border-color: #7d2c3d; background: #23090f; color: #ff9bad; }
.button-danger:hover:not(:disabled),
.button-danger:focus-visible { border-color: #ff607a; color: #fff; outline: none; }
.button-small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.stars { color: #ffd166; letter-spacing: 2px; }

/* Names the carried-over product sheet styles still use, pointed at this design’s tokens. */
:root { --muted: var(--ink-dim); --text: var(--ink); --blue: var(--accent); --cyan: #6fd3ff; --green: #4be0a4; --orange: #ffad42; --red: #ff5d73; }

/* ---- Header -------------------------------------------------------------------------------
   site-nav.js wraps the nav and the account controls in .site-menu-panel and adds the toggle.
   On wide screens the panel dissolves and everything sits in one row; below that the same panel
   becomes the menu. Every link of the current header is here in both cases. */
/* Everything in the row keeps its size except the account control, which gives way first. */
.site-header .brand { flex: 0 0 auto; order: 0; }
.site-menu-panel { display: contents; }
.site-header nav { flex: 0 0 auto; order: 1; }
/* These two are the buttons beside the nav on wide screens; in the menu they are listed with the rest. */
.site-header nav .in-menu { display: none; }
.top-quick { display: flex; flex: 0 0 auto; order: 2; gap: 8px; }
.top-quick .button { min-height: 38px; padding: 0 13px; font-size: 13.5px; white-space: nowrap; }
.mobile-nav-toggle { display: none; order: 4; }
.site-unread-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e73558;
  color: #fff;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0;
  vertical-align: middle;
}

/* Account controls as shop.js renders them: the Discord sign-in button, or a chip with the
   visitor’s name followed by Admin (staff only), My orders and Sign out. */
#accountActions { display: flex; order: 3; }
#accountActions .button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; font-size: 13.5px; white-space: nowrap; }
.account-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 38px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #0a0d12;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.account-chip img { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; }
.account-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.account-chip span:first-child { padding-left: 6px; }

@media (min-width: 1400px) {
  /* The chip opens its controls on hover or focus, so they are one move away without taking a
     third of the header. They stay in the page and in the tab order while closed. The Launcher’s
     built-in view keeps them in a plain row instead (see the end of the hand-written rules). */
  body:not(.launcher-mode) #accountActions { position: relative; z-index: 1; flex: 0 1 auto; flex-direction: column; align-items: stretch; min-width: 132px; height: 38px; }
  /* Keeps the pointer inside the control while it crosses from the chip to the list. */
  body:not(.launcher-mode) #accountActions::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 8px; }
  body:not(.launcher-mode) #accountActions .account-chip { cursor: pointer; }
  body:not(.launcher-mode) #accountActions .account-chip span { max-width: 20ch; }
  body:not(.launcher-mode) #accountActions .account-chip::after { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-left: auto; border-right: 1px solid var(--ink-dim); border-bottom: 1px solid var(--ink-dim); transform: translateY(-2px) rotate(45deg); }
  body:not(.launcher-mode) #accountActions .account-chip ~ .button {
    justify-content: space-between;
    min-height: 42px;
    margin-top: -1px;
    border-color: var(--line-strong);
    border-radius: 0;
    background: #0a0d12;
    opacity: 0;
    pointer-events: none;
  }
  body:not(.launcher-mode) #accountActions .account-chip + .button { margin-top: 8px; border-radius: 4px 4px 0 0; }
  body:not(.launcher-mode) #accountActions .account-chip ~ .button:last-child { border-radius: 0 0 4px 4px; }
  body:not(.launcher-mode) #accountActions:hover .account-chip ~ .button,
  body:not(.launcher-mode) #accountActions:focus-within .account-chip ~ .button { opacity: 1; pointer-events: auto; }
  body:not(.launcher-mode) #accountActions .account-chip ~ .button:hover { background: #151c26; }
  body:not(.launcher-mode) #accountActions .account-chip ~ .button:focus-visible { position: relative; z-index: 1; }
  /* Staff keep their unread count in view while the list is closed: the Admin link’s own badge
     sits on the corner of the chip, and returns to the link when the list opens. */
  body:not(.launcher-mode) #accountActions:not(:hover):not(:focus-within) .account-chip ~ a { border-color: transparent; background: none; color: transparent; opacity: 1; }
  body:not(.launcher-mode) #accountActions:not(:hover):not(:focus-within) .account-chip ~ a .site-unread-badge { position: absolute; top: -7px; right: -7px; margin: 0; }
}

/* Just above the menu breakpoint the row is tightened, so a signed-in visitor with unread badges
   still fits. A long name is the one thing that shortens, because the account control is the
   only part of the row allowed to shrink. */
@media (min-width: 1400px) and (max-width: 1519px) {
  .site-header { gap: 16px; }
  .site-header nav { gap: 14px; }
  .top-quick .button { padding: 0 11px; }
}

@media (max-width: 1399px) {
  /* Until site-nav.js has built the menu, the links it will hold stay out of the way. */
  .site-header > nav,
  .site-header > #accountActions { display: none; }
  .top-quick { margin-left: auto; }
  .mobile-nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: #0a0d12;
    color: var(--ink);
    font-size: 0;                         /* hides the glyph site-nav.js writes; the label below replaces it */
    cursor: pointer;
  }
  .mobile-nav-toggle::before { content: "Menu"; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .mobile-nav-open .mobile-nav-toggle::before { content: "Close"; }
  /* A dot on the menu button when a link inside it has unread items. */
  .site-header:has(.site-menu-panel .site-unread-badge) .mobile-nav-toggle::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e73558; }
  .site-menu-panel {
    position: fixed;
    top: calc(var(--header) - 6px);
    right: var(--gutter);
    z-index: 20;
    display: none;
    width: min(340px, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100vh - var(--header) - 12px);
    max-height: calc(100dvh - var(--header) - 12px);
    padding: 10px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #0a0d12;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  }
  .mobile-nav-open .site-menu-panel { display: grid; gap: 10px; }
  .site-menu-panel nav { display: grid; gap: 0; margin: 0; }
  .site-menu-panel nav a { display: flex; justify-content: space-between; padding: 13px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
  .site-menu-panel nav .in-menu { display: flex; }
  .site-menu-panel nav a:last-child { border-bottom: 0; }
  /* The account controls close the menu: who is signed in, then their actions, full width. */
  .site-menu-panel #accountActions { flex-direction: column; align-items: stretch; gap: 6px; }
  .site-menu-panel #accountActions .button { justify-content: space-between; min-height: 42px; }
  .site-menu-panel #accountActions .button-discord { justify-content: center; }
  .site-menu-panel .account-chip { padding: 4px 10px 8px; border: 0; background: none; color: var(--ink-dim); }
}

/* My account has its own control in the header: the Admin button for staff, then the visitor's
   name. account.js fills it. On narrow screens only the button stays; the name is on the page. */
#accountAction { display: flex; flex: 0 1 auto; order: 3; align-items: center; gap: 8px; min-width: 0; }
#accountAction .button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; font-size: 13.5px; white-space: nowrap; }
#accountAction .account-chip { display: block; flex: 0 1 auto; min-width: 0; padding: 0 14px; overflow: hidden; line-height: 36px; text-overflow: ellipsis; }
/* site-nav.js adds an Admin link to the navigation for staff; when it has, this one is a duplicate. */
.site-header:has(nav a[href="/admin"]) #accountAction a[href="/admin"] { display: none; }
@media (max-width: 1399px) {
  #accountAction { margin-left: auto; }
  #accountAction + .top-quick { margin-left: 0; }
}
@media (max-width: 760px) {
  /* The name stays in view; Join Discord is in the menu beside it. */
  .site-header:has(#accountAction:not(:empty)) .top-quick { display: none; }
}

/* ---- Shared pieces --------------------------------------------------------------------------- */
.eyebrow { display: block; color: var(--ink-dim); font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink-faint);
  transition: border-color .25s var(--ease);
}
.search:focus-within { border-color: var(--accent); }
.search input { width: 100%; min-height: 46px; border: 0; outline: 0; background: none; color: var(--ink); font: 400 16px var(--sans); }
/* A placeholder shown while a page loads its data, and the message when a list has nothing in it. */
.loading-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 236px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a0d12;
}
.loading-card,
.empty { display: grid; grid-column: 1 / -1; place-items: center; min-height: 160px; color: var(--ink-dim); text-align: center; }

/* ---- Notices, fields and dialogs ------------------------------------------------------------ */
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483647;
  max-width: 390px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  background: #0e131a;
  color: var(--ink);
  font-size: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast[popover] { inset: auto 22px 22px auto; margin: 0; }
.toast.show,
.toast:popover-open { opacity: 1; transform: none; }

.notice { margin: 15px 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: rgba(255, 255, 255, .025); color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
.notice p { margin: 7px 0 0; }
.notice strong { color: var(--ink); }
.notice.warning { border-color: #7a5a22; background: #1f1808; color: #ffd38c; }
.notice.warning strong { color: #ffe2b3; }
.notice.error { border-color: #7d2c3d; background: #220a10; color: #ff9aad; }
.notice.error strong { color: #ffc2cd; }
.field { display: block; margin: 14px 0; color: var(--ink-dim); font-size: 15px; font-weight: 500; }
.field input,
.field select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #07090c;
  color: var(--ink);
  color-scheme: dark;
  font: 500 16px var(--sans);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus,
.field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 157, 255, .18); outline: none; }
.checkbox-field { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid #7a5a22; border-radius: 4px; background: #1f1808; color: #ffd38c; }
.checkbox-field input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; margin: 16px 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 4px; }
.summary strong:last-child { font: 700 20px/1 var(--sans); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.address { padding: 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: #07090c; font: 400 13px/1.5 var(--mono); word-break: break-all; }
.key-box { padding: 15px; border: 1px solid rgba(75, 224, 164, .45); border-radius: 4px; background: #07100c; color: #8fffd6; font: 500 14px/1.5 var(--mono); word-break: break-all; }
.crypto-quote-copy { display: flex; flex-wrap: wrap; gap: 9px; margin: 11px 0; }

.modal {
  width: min(580px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #0a0d12;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .72);
}
.modal-wide { width: min(760px, calc(100% - 28px)); }
.modal::backdrop { background: rgba(3, 5, 8, .86); backdrop-filter: blur(6px); }
.modal-content { padding: 26px; }
.modal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.modal h2 { margin: 10px 0 8px; font: 800 24px/1.15 var(--sans); font-stretch: 112%; letter-spacing: -.01em; }
.close-button {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #7d2c3d;
  border-radius: 4px;
  background: #23090f;
  color: #ff9bad;
  font-size: 18px;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.close-button:hover,
.close-button:focus-visible { border-color: #ff607a; background: #a52e47; color: #fff; outline: none; }
/* My orders lists each order as one of these. */
.choice { display: block; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: #07090c; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.choice:hover:not(:disabled),
.choice:focus-visible { border-color: var(--accent); background: #0c1622; outline: none; }
.choice strong,
.choice span { display: block; }
.choice span { margin-top: 4px; color: var(--ink-dim); font: 500 12px/1.4 var(--mono); letter-spacing: .06em; }

/* Scrollbars inside panels and dialogs. */
* { scrollbar-width: thin; scrollbar-color: #2c3642 transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb { border-radius: 999px; background: #2c3642; }
*::-webkit-scrollbar-thumb:hover { background: #3d4a59; }

.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 34px var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-faint);
  font: 400 13px/1.5 var(--mono);
  letter-spacing: .04em;
}
.foot p { margin: 0; }
.foot nav { display: flex; gap: 24px; }
.foot a { color: var(--ink-dim); text-decoration: none; }
.foot a:hover,
.foot a:focus-visible { color: var(--ink); outline: none; }

@media (max-width: 760px) {
  .toast[popover] { inset: auto 10px 10px 10px; max-width: none; }
}
@media (max-width: 620px) {
  .top-quick .button:last-child { display: none; }     /* the Windows download is not for phones; it stays in the menu */
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Account picture ----------------------------------------------------------------------------
   site.js gives the chip the visitor's Discord picture, or their initial when there is none. */
.account-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1b2634;
  color: var(--ink);
  font: 600 12px/1 var(--mono);
}
/* While the links are in the menu, the picture stands beside the menu button. */
.top-avatar { display: none; order: 3; flex: 0 0 auto; border-radius: 50%; outline-offset: 3px; }
.top-avatar img,
.top-avatar .account-avatar { display: grid; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; font-size: 15px; }
@media (max-width: 1399px) {
  .top-avatar { display: block; }
}
/* On a phone there is room for the picture or for Join Discord, not both; a signed-in visitor
   already has Discord, and the link stays in the menu. */
@media (max-width: 520px) {
  .site-header:has(.top-avatar) .top-quick { display: none; }
  .site-header:has(.top-avatar) .top-avatar { margin-left: auto; }
}

/* Moving between pages. Nothing is ever held back or hidden: twice a version of this left the
   screen empty while a page loaded. The header stays in place. The page you leave is flown past,
   towards the eye, while the next one opens beneath it at the same moment, so the screen is never
   empty. On the inner pages (those with a place on the board, data-scene) the heading and whatever
   else is already there come forward out of the depth as the page opens, the board flies in
   behind them (site.js, startBackdrop), and the rest rises into place as the page's script draws
   it. The store keeps its own opening, the flight down to the board. A light runs along the
   header while content is still arriving. In a browser that does not animate a change of page,
   the page being left fades back first (site.js, "page-leaving"). A visitor who asked for reduced
   motion gets none of this. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  @keyframes page-leave {
    to { opacity: 0; transform: perspective(1400px) translate3d(0, -10px, 210px) rotateX(-4deg); filter: blur(5px); }
  }
  @keyframes page-open { from { opacity: 0; } }
  @keyframes page-arrive {
    from { opacity: 0; transform: perspective(1400px) translate3d(0, 30px, -260px) rotateX(6deg); }
  }
  @keyframes header-light { from { background-position: -50% 0; } to { background-position: 150% 0; } }
  ::view-transition-old(root),
  ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { transform-origin: 50% 38%; animation: page-leave .36s cubic-bezier(.4, 0, .9, .6) both; }
  ::view-transition-new(root) { animation: page-open .3s ease both; }
  body[data-scene] main { transform-origin: 50% 260px; animation: page-arrive .7s var(--ease) backwards; }
  html.page-leaving main { opacity: 0; transform: translate3d(0, -8px, 0) scale(1.02); transition: opacity .17s ease, transform .17s ease; }
  html.page-entering .site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
    background-size: 36% 100%;
    animation: header-light 1s linear infinite;
  }
}