/* ============================================================
   AU (Aurelius Capital) skin.

   The ONLY stylesheet this skin ships (skins/<name>/skin.css is
   auto-bundled by the registry in src/skin.js).

   Every colour comes from a :root variable set by skin.js so the
   one set of rules serves both themes. Never hardcode a hex here
   — add it to skin.js instead.
   ============================================================ */

:root {
  --au-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --au-shell: 1200px;
  --au-radius: 12px;
  --au-radius-sm: 6px;
}

/* ---- Base ---- */

/* `html body`, not `body`, on purpose. app/skin.css carries an unscoped
   `body { font-family: var(--ap-font) }` — deliberately unscoped so the
   default skin's /user and /cp match its guest area — and that file bundles
   for EVERY skin. At equal weight it was landing later and winning, so the
   whole of au was being drawn in Signika Negative while the shell loaded
   Inter for it. One step of specificity settles it inside this skin, which is
   where a skin's own face belongs. */
html body {
  font-family: var(--au-font);
  background: var(--background-colour);
  color: var(--background-font-colour);
  -webkit-font-smoothing: antialiased;
}

/* Form controls do not inherit a font, so the face has to be handed to them. */
body button,
body input,
body select,
body textarea {
  font-family: var(--au-font);
}

.au-section h2,
.au-section h3,
.au-hero h1 {
  font-family: var(--au-font);
  color: var(--background-heading-colour);
  letter-spacing: -0.02em;
}

/* The reference's headline highlight: indigo→purple clipped to the text. */
.au-gradient-text {
  background: var(--au-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* When the heading ITSELF carries the class — the closing CTA — the block
   above it is the more specific selector and would paint the ink back in,
   leaving a solid heading. Same weight, later in the file, so this wins. */
h1.au-gradient-text,
h2.au-gradient-text,
h3.au-gradient-text {
  color: transparent;
}

/* ---- Buttons ---- */

.au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--au-radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.au-btn-solid {
  background: var(--primary-button);
  border-color: var(--primary-button);
  color: #fff;
}

.au-btn-solid:hover {
  background: var(--au-purple);
  border-color: var(--au-purple);
  color: #fff;
}

/* Login in the reference is outlined in the accent; Register in plain hairline */
.au-btn-outline-accent {
  border-color: var(--au-indigo);
  color: var(--au-indigo);
  background: transparent;
}

.au-btn-outline-accent:hover {
  background: var(--au-indigo);
  color: #fff;
}

/* The reference's two big calls to action — Get Started and Join Now — are
   OUTLINED, not filled: an indigo edge with the heading's ink inside. Kept
   apart from .au-btn-outline-accent (the header's Login), which is indigo edge
   AND indigo text. */
.au-btn-outline-light {
  border-color: var(--au-indigo);
  color: var(--background-heading-colour);
  background: transparent;
}

.au-btn-outline-light:hover {
  background: var(--au-indigo);
  color: var(--au-on-accent);
}

.au-btn-outline {
  border-color: var(--au-hairline);
  color: var(--au-muted);
  background: transparent;
}

.au-btn-outline:hover {
  border-color: var(--background-heading-colour);
  color: var(--background-heading-colour);
}

.au-btn-lg {
  padding: 13px 26px;
  font-size: 15px;
}

.au-btn-block {
  display: flex;
  width: 100%;
  margin-top: 10px;
}

/* ---- Header ---- */

.au-header {
  position: sticky;
  top: 0;
  z-index: 997;
  background: var(--background-colour);
  border-bottom: 1px solid var(--border-colour);
}

.au-header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: var(--au-shell);
  margin: 0 auto;
  padding: 12px 16px;
}

.au-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--background-heading-colour);
  line-height: 1;
}

/* The mark is an <img> of the generated PWA icon now, not an inline SVG, so
   there is no currentColor for it to inherit — it only needs holding to its
   box. object-fit guards against a non-square source being stretched. */
.au-brand .au-mark {
  flex: none;
  object-fit: contain;
}

.au-brand b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.au-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

.au-nav a {
  padding: 8px 12px;
  border-radius: var(--au-radius-sm);
  color: var(--nav-primary-font-colour);
  font-size: 14px;
  font-weight: 500;
}

.au-nav a:hover {
  background: var(--hover);
  color: var(--background-heading-colour);
}

.au-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
}

/* The nav beside it takes the free space, so without this the tools shrink
   below their content and "Login"/"Register" wrap a letter per line. */
.au-tools > li {
  flex: none;
}

/* TranslatorComponent renders a bare <li>; ThemeChangerNav2Component puts its
   className on the inner icon <span>. Both are styled as icon buttons. */
.au-translator,
.au-icon-btn,
.au-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-width: 34px;
  padding: 0 9px;
  border-radius: var(--au-radius-sm);
  color: var(--nav-primary-font-colour);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.au-theme-toggle {
  font-size: 18px !important;
}

.au-translator:hover,
.au-icon-btn:hover,
.au-theme-toggle:hover {
  background: var(--hover);
  color: var(--background-heading-colour);
}

/* ---- Mobile drawer ---- */

.au-mnav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.au-mnav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.au-mnav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1003;
  width: 310px;
  max-width: 86vw;
  padding: 24px 20px;
  background: var(--primary-background);
  border-left: 1px solid var(--border-colour);
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform 0.28s ease;
}

.au-mnav.is-open {
  transform: translateX(0);
}

.au-mnav-links {
  margin: 22px 0 18px;
  border-top: 1px solid var(--border-colour);
}

.au-mnav-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  font-weight: 500;
}

.au-mnav-links li a .fa-solid {
  font-size: 18px;
  color: var(--au-muted);
}

.au-mnav-translator {
  margin-bottom: 16px;
}

/* ---- Hero ---- */

/* ---- Dot ground ---- */

/* The reference's page ground: a dot field that fades out towards the edges of
   each band, so the dots read as texture under the content and never reach the
   rule between two sections. One pseudo-element per band — the mask does the
   vignette the reference builds out of a second, page-coloured overlay. */

.au-dots {
  position: relative;
}

.au-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--au-dots);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%);
}

.au-dots > * {
  position: relative;
  z-index: 1;
}

.au-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 34px;
  max-width: var(--au-shell);
  margin: 0 auto;
  padding: 72px 16px 84px;
}

.au-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.16;
  font-weight: 700;
}

.au-hero-copy p {
  margin: 0 0 26px;
  max-width: 430px;
  color: var(--au-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ---- Hero collage ---- */

/* A fixed window onto a much larger plane of drifting screenshots. The plane
   overflows this box on every side; the crop is the composition. */
.au-hero-art {
  position: relative;
  height: 35rem;
  border-radius: var(--au-radius);
  overflow: hidden;
}

/* Rotated out of the page plane and oversized, so the columns run diagonally
   across the window and no column start or end is ever on screen. */
.au-collage {
  --au-collage-gap: 36px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* start, not stretch: a column has to keep its CONTENT height or the -50%
     the animation travels stops being exactly one copy and the loop jumps. */
  align-items: start;
  gap: 48px;
  width: 50rem;
  height: 75rem;
  overflow: hidden;
  transform-origin: 50% 0%;
  transform: translate3d(7%, -2%, 0) scale3d(0.9, 0.8, 1) rotateX(15deg) rotateY(-9deg) rotateZ(32deg);
}

/* No gap here — the trailing gap lives on the set, so two stacked sets are
   exactly twice one set's box and translateY(-50%) lands on the seam. */
.au-collage-col {
  display: flex;
  flex-direction: column;
  animation: au-collage-drift 30s linear infinite;
  will-change: transform;
}

/* Reversing the same keyframes walks the column the other way. */
.au-collage-col.is-down {
  animation-direction: reverse;
}

/* Three durations so the columns never travel in lockstep — the reference
   gets the same effect by giving each column a different content height. */
.au-collage-col:nth-child(1) { animation-duration: 30s; }
.au-collage-col:nth-child(2) { animation-duration: 26s; }
.au-collage-col:nth-child(3) { animation-duration: 34s; }

.au-collage-set {
  display: flex;
  flex-direction: column;
  gap: var(--au-collage-gap);
  padding-bottom: var(--au-collage-gap);
}

.au-collage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--au-hairline);
  box-shadow: var(--au-shot-shadow);
}

@keyframes au-collage-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .au-collage-col {
    animation: none;
  }
}

/* ---- Ticker ---- */

/* The track holds the list twice, so -50% lands exactly on the start of the
   second copy — the loop restarts with nothing visibly jumping. */

/* Comes from the asset record, so it is whatever the desk uploaded — sized and
   clipped here rather than trusted to arrive square. */

/* ---- Sections ---- */

.au-section {
  max-width: var(--au-shell);
  margin: 0 auto;
  padding: 66px 16px;
}

.au-section-title {
  margin: 0 0 34px;
  max-width: 620px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  font-weight: 700;
}

/* ---- Stats ---- */

.au-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.au-stat-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.au-stat-figure strong {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  /* the reference sets the figures in the accent, not the heading ink */
  color: var(--au-indigo);
}

.au-stat-figure em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--au-up);
}

.au-stat p {
  margin: 10px 0 0;
  color: var(--au-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---- Features ---- */

/* Screen on the left, the three tabs that drive it on the right. */
.au-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

/* All three shots are stacked in here and cross-faded, so the box has to hold
   its own height rather than take it from whichever image is showing. The
   three are within a hair of 3:2, so one ratio serves them all. */
.au-feature-shot {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--au-radius);
  overflow: hidden;
  border: 1px solid var(--border-colour);
  box-shadow: var(--au-shot-shadow);
}

.au-feature-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.au-feature-shot img.is-active {
  opacity: 1;
}

.au-feature-tabs .au-section-title {
  margin: 0 0 20px;
}

.au-feature-tablist {
  display: grid;
  gap: 14px;
}

.au-feature {
  display: flex;
  gap: 18px;
  width: 100%;
  padding: 20px;
  text-align: left;
  border-radius: var(--au-radius);
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.au-feature:hover {
  background: var(--au-panel);
}

/* the tab driving the screen currently on show */
.au-feature.is-active {
  background: var(--au-panel-raised);
  border-color: var(--au-hairline);
}

.au-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--au-gradient);
  color: #fff;
  font-size: 20px !important;
}

.au-feature-body {
  display: block;
}

.au-feature-title {
  display: block;
  margin-bottom: 8px;
  color: var(--background-heading-colour);
  font-size: 16px;
  font-weight: 600;
}

.au-feature-text {
  display: block;
  color: var(--au-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ---- Closing CTA ---- */

.au-cta {
  position: relative;
  overflow: hidden;
  padding: 54px 32px;
  border-radius: var(--au-radius);
  border: 1px solid var(--border-colour);
  background: var(--au-panel);
  text-align: center;
}

/* Decorative plate behind the copy — one artwork per theme. */
.au-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.au-cta-inner {
  position: relative;
  z-index: 1;
}

.au-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
}

.au-cta p {
  margin: 0 auto 24px;
  max-width: 480px;
  color: var(--au-muted);
  font-size: 14.5px;
}

/* ---- Footer ---- */

.au-footer {
  border-top: 1px solid var(--border-colour);
  background: var(--secondary-background);
}

.au-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  max-width: var(--au-shell);
  margin: 0 auto;
  padding: 52px 16px 34px;
}

.au-footer-about p {
  margin: 16px 0 0;
  max-width: 380px;
  color: var(--au-muted);
  font-size: 13px;
  line-height: 1.75;
}

.au-footer-col h6 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--background-heading-colour);
}

.au-footer-col a,
.au-footer-col span {
  display: block;
  margin-bottom: 9px;
  color: var(--au-muted);
  font-size: 13px;
}

.au-footer-col span a {
  display: inline;
  margin: 0;
  color: var(--background-link-colour);
}

.au-footer-col > a:hover {
  color: var(--background-heading-colour);
}

.au-footer-copy {
  max-width: var(--au-shell);
  margin: 0 auto;
  padding: 0 16px 30px;
  color: var(--au-muted);
  font-size: 12.5px;
}

/* ---- Auth (sign in / sign up) ---- */

/* Artwork (sign in) or promo (sign up) takes the width it can spare; the form
   column is held to a readable measure rather than half the screen. */
.au-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  min-height: 100vh;
  background: var(--background-colour);
}

.au-auth-aside {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--au-auth-aside);
  border-right: 1px solid var(--border-colour);
  overflow: hidden;
}

/* Sign up's half is the brand plate: the accent gradient, no rule beside it. */
.au-auth-aside.is-promo {
  background: var(--au-gradient);
  border-right: 0;
}

.au-auth-aside-inner {
  position: relative;
  max-width: 380px;
  text-align: center;
}

/* Sign in's half is artwork on the page ground — small, centred, no card. */
.au-auth-art {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: auto;
}

.au-auth-aside h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--background-heading-colour);
}

.au-auth-aside p {
  margin: 0 0 22px;
  color: var(--au-muted);
  font-size: 14px;
  line-height: 1.7;
}

.au-auth-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--au-gradient);
  filter: blur(110px);
  opacity: 0.22;
  pointer-events: none;
}

.au-auth-main {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 48px;
}

.au-auth-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 34px;
}

.au-auth-tools {
  display: flex;
  align-items: center;
  margin: 0;
}

.au-auth-form {
  width: 100%;
  max-width: 380px;
  margin: auto;
}

/* the sign-up form carries every field the admin has enabled, so it gets more
   room than the two-field sign in */
.au-auth-form-wide {
  max-width: 520px;
}

.au-auth-form h1 {
  margin: 0 0 26px;
  font-size: 24px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.au-auth-form label {
  display: block;
  margin-bottom: 7px;
  color: var(--background-heading-colour);
  font-size: 13px;
  font-weight: 500;
}

/* Materialize styles bare inputs by element, so these have to win. */
.au-auth-field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius-sm);
  background: var(--au-panel);
}

.au-auth-field > .fa-solid {
  padding: 0 10px;
  font-size: 18px;
  color: var(--au-muted);
}

.au-auth-field input {
  flex: 1;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 10px 0 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--background-heading-colour) !important;
  font-family: var(--au-font);
  font-size: 14px !important;
}

.au-auth-field input::placeholder {
  color: var(--au-muted);
}

.au-auth-field:focus-within {
  border-color: var(--au-indigo);
}

.au-auth-reveal {
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--au-muted);
  cursor: pointer;
}

.au-auth-reveal .fa-solid {
  font-size: 18px;
}

.au-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.au-auth-row a {
  color: var(--au-indigo);
  font-size: 13px;
}

/* ---- Checkbox ---- */

/* Materialize hides any bare checkbox and draws its own out of the sibling
   span, so the control here is a drawn box with the real input still in the
   DOM taking the clicks and the keyboard. */
.au-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  color: var(--au-muted) !important;
  font-size: 13px;
  font-weight: 400 !important;
  cursor: pointer;
}

.au-check input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Materialize draws its OWN box out of this span's :before/:after whenever a
   checkbox precedes it. Every selector below is pitched at the same weight as
   those rules and lands later in the cascade, so the drawn control here
   replaces them rather than stacking on top. */
.au-check input[type='checkbox'] + .au-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--au-hairline);
  background: var(--au-panel);
  transition: background 0.18s ease, border-color 0.18s ease;
}

/* Materialize's tick — nothing to keep, the dot below is the whole control. */
.au-check input[type='checkbox'] + .au-check-box::before {
  content: none;
}

.au-check input[type='checkbox'] + .au-check-box::after {
  content: '';
  position: static;
  width: 8px;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: none;
  transition: background 0.18s ease;
}

.au-check input[type='checkbox']:checked + .au-check-box {
  border-color: var(--au-indigo);
}

.au-check input[type='checkbox']:checked + .au-check-box::after {
  background: var(--au-indigo);
}

.au-check input[type='checkbox']:focus-visible + .au-check-box {
  border-color: var(--au-indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-indigo) 30%, transparent);
}

.au-check-terms {
  margin-bottom: 20px !important;
}

.au-check-terms a {
  color: var(--au-indigo);
}

.au-auth-errors {
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid var(--au-down);
  border-radius: var(--au-radius-sm);
  background: color-mix(in srgb, var(--au-down) 12%, transparent);
}

.au-auth-errors p {
  margin: 0;
  color: var(--au-down);
  font-size: 13px;
}

.au-auth-referral {
  margin-bottom: 18px;
  color: var(--au-indigo);
  font-size: 13px;
}

/* The rule the reference draws between the form and its footer line. */
.au-auth-alt {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-colour);
  color: var(--au-muted);
  font-size: 13.5px;
}

.au-auth-alt a {
  color: var(--au-indigo);
}

/* Named for what it does, not where it is: reachable by screen reader, absent
   on screen. The sign-in page uses it for the h1 the reference has no room
   for. */
.au-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* On the accent plate white is correct in BOTH themes, so it is written here
   rather than tokenised — there is nothing for a theme to decide. */
.au-auth-aside.is-promo h2,
.au-auth-aside.is-promo p {
  color: #fff;
}

.au-auth-aside.is-promo h2 {
  font-size: 16px;
  font-weight: 600;
}

.au-auth-aside.is-promo p {
  margin-bottom: 26px;
  font-size: 14px;
  opacity: 0.86;
}

/* The one button that sits ON the accent, so it goes dark instead of indigo. */
.au-btn-onaccent {
  background: var(--au-404-plate);
  color: #fff;
}

.au-btn-onaccent:hover {
  background: var(--au-panel-raised);
  color: #fff;
}

/* The reference's toggle is a plate, not a bare icon. */
.au-theme-toggle-pill {
  border-radius: var(--au-radius-sm);
  background: var(--au-panel);
  border: 1px solid var(--au-hairline);
}

/* ---- Sign-up form (FormComponent's Materialize markup) ---- */

/* The fields come from the shared FormComponent, so this section dresses ITS
   markup rather than replacing it — the field list stays whatever the admin
   switched on under Settings → Registration. */

.au-auth-fields .row {
  margin: 0;
}

.au-auth-fields .col {
  padding: 0;
}

.au-auth-fields .input-field {
  margin: 0 0 18px;
}

.au-auth-fields .form-top-label-wrap {
  margin-bottom: 7px;
}

.au-auth-fields .form-top-label,
.au-auth-fields label:not(.au-check) {
  display: block;
  color: var(--background-heading-colour);
  font-size: 13px;
  font-weight: 500;
}

.au-auth-fields input:not([type='checkbox']),
.au-auth-fields select,
.au-auth-fields textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--au-hairline) !important;
  border-radius: var(--au-radius-sm) !important;
  outline: none !important;
  box-shadow: none !important;
  background: var(--au-panel) !important;
  color: var(--background-heading-colour) !important;
  font-family: var(--au-font);
  font-size: 14px !important;
}

.au-auth-fields textarea {
  height: auto !important;
  padding: 10px 12px !important;
}

.au-auth-fields input::placeholder {
  color: var(--au-muted);
}

.au-auth-fields input:focus,
.au-auth-fields select:focus {
  border-color: var(--au-indigo) !important;
}

/* The agreement checkbox that closes the field list. FormComponent gives it
   Materialize's markup — label > input + span — and Materialize draws the
   control out of that span's pseudo-elements, so the round box the reference
   shows is made by restyling them. Every selector below is deliberately one
   class heavier than Materialize's own, which is what it takes to win. */
.au-auth-fields .row label > input[type='checkbox'] + span:not(.lever) {
  padding-left: 28px;
  color: var(--au-muted);
  font-size: 13px;
  line-height: 1.6;
}

.au-auth-fields .row label > input[type='checkbox'] + span:not(.lever) a {
  color: var(--au-indigo);
}

/* Materialize's tick — the fill below is the whole state. */
.au-auth-fields .row label > input[type='checkbox'] + span:not(.lever)::before {
  content: none;
}

.au-auth-fields .row label > input[type='checkbox'] + span:not(.lever)::after {
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--au-hairline);
  background: var(--au-panel);
  transform: none;
}

.au-auth-fields .row label > input[type='checkbox']:checked + span:not(.lever)::after {
  border-color: var(--au-indigo);
  background: var(--au-indigo);
}

/* ---- 404 ---- */

.au-404 {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 16px 88px;
  text-align: center;
}

/* The illustration ships in one variant, drawn for a dark ground, so it keeps
   its own plate (--au-404-plate is dark in both themes). */
.au-404-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 24px;
  border-radius: var(--au-radius);
  background: var(--au-404-plate);
  /* The digits are deliberately bigger than they can fit — the plate crops
     them, which is what keeps them reading as ground rather than as a line of
     text, and stops them running into the heading below. */
  overflow: hidden;
}

/* The oversized digits behind the figure. Kept a step off the PLATE rather
   than given a colour of their own — this is texture, not text. */
.au-404-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  /* block, so line-height governs the box. As an inline span the box is the
     font's own content area — roughly twice the size here — and the digits
     were being cropped top and bottom by the plate. */
  display: block;
  transform: translate(-50%, -50%);
  color: var(--au-404-ghost);
  font-size: clamp(130px, 20vw, 210px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  user-select: none;
}

.au-404-art img {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.au-404-title {
  margin: 28px 0 0;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--background-heading-colour);
}

.au-404-copy {
  margin: 10px auto 0;
  max-width: 520px;
  color: var(--au-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* The route that missed. Monospace and wrappable — a deep path must break
   rather than push the page sideways. */
.au-404-route {
  display: inline-block;
  max-width: 100%;
  margin: 18px 0 0;
  padding: 8px 14px;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius-sm);
  background: var(--au-panel);
  color: var(--au-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.au-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---- Responsive ---- */

@media only screen and (max-width: 992px) {
  .au-hero-inner {
    grid-template-columns: 1fr;
    padding: 48px 16px 56px;
  }

  /* Shorter window on the same plane — the collage keeps its own size, so it
     simply shows less of itself. */
  .au-hero-art {
    height: 26rem;
  }

  .au-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Screen above, tabs below */
  .au-feature-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .au-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* the promo half is decoration — drop it and give the form the screen */
  .au-auth {
    grid-template-columns: 1fr;
  }

  .au-auth-aside {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .au-section {
    padding: 46px 16px;
  }

  .au-stats,
  .au-footer-inner {
    grid-template-columns: 1fr;
  }

  .au-hero-art {
    height: 20rem;
  }

  .au-feature {
    padding: 16px;
  }

  .au-cta {
    padding: 38px 20px;
  }
}


/* ─── sticky footer ───────────────────────────────────────────────────────
   Keeps the footer on the bottom edge when a page is shorter than the screen.
   No flex or grid: the shell stays in normal block flow, so nothing inside
   becomes a flex item and margins go on collapsing as before. On a long page
   there is nothing to stick to and the footer just ends the content.

   Note: this stops working if an ancestor of the footer ever sets
   overflow: hidden/auto/scroll. */

.au-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.au-shell > footer {
  position: sticky;
  top: 100vh;
}


/* ============================================================
   (user) dashboard — /user
   ============================================================ */

.au-db {
  max-width: var(--au-shell);
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.au-db .row {
  margin-bottom: 0;
}

/* ---- the two balance cards ---- */

.au-db-balance {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius);
  background: var(--au-panel);
}

.au-db-balance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--au-radius-sm);
}

.au-db-balance-icon .material-icons {
  font-size: 22px;
}

.au-db-balance-icon-indigo {
  background: var(--au-indigo-soft);
  color: var(--au-indigo);
}

.au-db-balance-icon-up {
  background: var(--au-up-soft);
  color: var(--au-up);
}

.au-db-balance-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.au-db-balance-text small {
  font-size: 13px;
  color: var(--au-muted);
}

.au-db-balance-text b {
  font-size: 24px;
  line-height: 1.25;
  color: var(--background-heading-colour);
}

/* ---- signal strength ---- */

.au-db-signal {
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius);
  background: var(--au-panel);
}

.au-db-signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.au-db-signal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.au-db-signal-title .material-icons {
  font-size: 20px;
  color: var(--au-up);
}

.au-db-signal-head a {
  font-size: 14px;
  color: var(--background-link-colour);
}

.au-db-signal-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.au-db-signal-track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: var(--au-pill);
  overflow: hidden;
}

.au-db-signal-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--au-up);
}

.au-db-signal-row b {
  font-size: 15px;
  color: var(--au-up);
}

.au-db-signal > small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}

/* ---- trading history ---- */

.au-db-heading {
  margin: 22px 0 12px;
  font-size: 22px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.au-db-empty {
  padding: 22px;
  text-align: center;
  color: var(--au-muted);
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius);
  background: var(--au-panel);
}

/* The table is wider than a phone. It scrolls inside its own box so the PAGE
   never gains a horizontal scrollbar. */
.au-db-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius);
  background: var(--au-panel);
}

/* `fixed` with the colgroup widths is what stops the open book from shaking:
   under the default `auto` layout the browser re-measures every column against
   its content on each render, and an open trade rewrites its price and P/L on
   every tick. Widths are settled once from the colgroup instead. */
.au-db-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Tabular figures so a 1 and a 7 take the same width — without this the digits
   still shuffle within a fixed column as prices move. */
.au-db-table .notranslate,
.au-db-pl,
.au-db-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* A fixed column cannot grow, so anything overlong is trimmed rather than
   allowed to spill into its neighbour. Scoped to the wide layout — the stacked
   phone cards below give every value a full line and must not clip. */
@media only screen and (min-width: 701px) {
  .au-db-table td > * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Win / Loss on a settled trade. */
.au-db-outcome {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--au-radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.au-db-outcome-win {
  background: var(--au-up-soft);
  color: var(--au-up);
}

.au-db-outcome-loss {
  background: var(--au-down-soft);
  color: var(--au-down);
}

.au-db-table th,
.au-db-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--au-hairline);
  white-space: nowrap;
}

.au-db-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--au-muted);
  background: var(--secondary-background);
  user-select: none;
}

/* Only the four sortable headings take a pointer — Price and P/L do not sort. */
.au-db-table thead th[aria-sort] {
  cursor: pointer;
}

.au-db-table thead th.au-db-sorted {
  color: var(--background-heading-colour);
}

.au-db-sort {
  font-size: 16px;
  vertical-align: -4px;
}

.au-db-table tbody tr {
  cursor: pointer;
}

.au-db-table tbody tr:hover {
  background: var(--hover);
}

.au-db-table tbody tr:last-child td {
  border-bottom: 0;
}

.au-db-symbol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.au-db-symbol img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.au-db-symbol-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.au-db-symbol b {
  color: var(--background-heading-colour);
}

/* The trader who placed it, under the asset. Sized down so the symbol stays
   the thing you read first. */
.au-db-symbol-text .au-db-trader {
  font-size: 11px;
  color: var(--au-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.au-db-type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--au-radius-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.au-db-type-up {
  background: var(--au-up-soft);
  color: var(--au-up);
}

.au-db-type-down {
  background: var(--au-down-soft);
  color: var(--au-down);
}

.au-db-amount {
  display: flex;
  flex-direction: column;
}

.au-db-amount b {
  color: var(--background-heading-colour);
}

.au-db-amount small {
  font-size: 12px;
  color: var(--au-muted);
}

.au-db-result {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--au-radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: var(--au-pending-soft);
  color: var(--au-pending);
}

.au-db-price {
  color: var(--au-muted);
  font-size: 13px;
}

.au-db-arrow {
  opacity: 0.6;
}

/* The dash a trader-placed trade shows where its prices would be — the trader
   itself is named under the asset instead (see .au-db-symbol-text). */
.au-db-muted {
  color: var(--au-muted);
}

.au-db-pl {
  font-weight: 600;
}

/* The countdown under a timed trade's profit. */
.au-db-timer {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--au-muted);
}

/* Shared tone helpers for this skin's user area. */
.au-up {
  color: var(--au-up);
}

.au-down {
  color: var(--au-down);
}

.au-pending-text {
  color: var(--au-pending);
}


/* ============================================================
   (user) copy trading — /user/trading?tab=traders
   ============================================================ */

.au-traders {
  padding: 20px 0 48px;
}

.au-traders .container {
  max-width: var(--au-shell);
}

/* ListComponent wraps its items in `ul.collection.row`; the cards carry their
   own frames, so Materialize's collection chrome is taken back off. */
.au-traders .collection {
  border: 0;
  margin: 0;
  padding: 0;
}

.au-traders .collection .collection-item {
  background: transparent;
  border: 0;
}

.au-trader-hidden {
  display: none;
}

/* ---- search ---- */

.au-trader-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  margin-bottom: 18px;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius);
  background: var(--au-panel);
}

.au-trader-search-icon {
  font-size: 22px;
  color: var(--au-muted);
}

/* Materialize styles bare inputs globally — the underline, height and margin
   all have to be answered here for the field to sit inside the box. */
.au-trader-search input[type='text'] {
  flex: 1 1 auto;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--background-heading-colour);
  font-size: 17px;
}

.au-trader-search input[type='text']:focus {
  border: 0;
  box-shadow: none;
}

.au-trader-search-clear {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--au-muted);
  cursor: pointer;
}

/* The fetch indicator, drawn on the box's own bottom edge rather than as a
   Materialize .progress bar that would change the field's height mid-search. */
.au-trader-search-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  border-radius: 0 0 var(--au-radius) var(--au-radius);
  background: var(--au-gradient);
}

/* ---- the card ---- */

.au-trader-card {
  display: block;
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius);
  background: var(--au-panel);
}

.au-trader-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.au-trader-avatar {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
}

.au-trader-avatar img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}

.au-trader-verified,
.au-trader-presence {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--au-panel);
}

.au-trader-verified {
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: var(--background-link-colour);
}

.au-trader-verified .material-icons {
  font-size: 13px;
  color: var(--background-colour);
}

.au-trader-presence {
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  background: var(--au-muted);
}

.au-trader-identity {
  flex: 1 1 auto;
  min-width: 0;
}

.au-trader-identity h5 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.au-trader-identity small {
  font-size: 14px;
  color: var(--au-muted);
}

.au-trader-winrate {
  text-align: right;
}

.au-trader-winrate b {
  display: block;
  font-size: 21px;
  font-weight: 600;
  color: var(--au-up);
}

.au-trader-winrate small {
  font-size: 13px;
  color: var(--au-muted);
}

.au-trader-bio {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--au-muted);
}

/* ---- headline counts ---- */

.au-trader-headlines {
  display: flex;
  margin-top: 16px;
}

.au-trader-headline {
  flex: 1 1 50%;
  text-align: center;
}

.au-trader-headline b {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.au-trader-headline small {
  font-size: 13px;
  color: var(--au-muted);
}

/* ---- win / loss / draw ---- */

.au-trader-outcomes {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.au-trader-outcome {
  flex: 1 1 33.333%;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--au-radius-sm);
}

.au-trader-outcome b {
  display: block;
  font-size: 19px;
  font-weight: 600;
}

.au-trader-outcome small {
  font-size: 13px;
}

.au-trader-outcome-up {
  background: var(--au-up-soft);
  border-color: var(--au-up);
}

.au-trader-outcome-up b,
.au-trader-outcome-up small {
  color: var(--au-up);
}

.au-trader-outcome-down {
  background: var(--au-down-soft);
  border-color: var(--au-down);
}

.au-trader-outcome-down b,
.au-trader-outcome-down small {
  color: var(--au-down);
}

.au-trader-outcome-flat {
  background: var(--au-panel-raised);
  border-color: var(--au-hairline);
}

.au-trader-outcome-flat b,
.au-trader-outcome-flat small {
  color: var(--au-muted);
}

/* ---- terms ---- */

.au-trader-terms {
  margin-top: 16px;
}

.au-trader-term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--au-muted);
}

.au-trader-term b {
  font-weight: 600;
  color: var(--background-heading-colour);
}

/* ---- durations ---- */

.au-trader-durations {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--au-hairline);
}

.au-trader-durations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--au-muted);
}

.au-trader-durations-head .material-icons {
  font-size: 19px;
}

.au-trader-duration-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
}

.au-trader-duration {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--au-indigo);
  color: var(--au-on-accent);
}

.au-trader-durations small {
  font-size: 13px;
  color: var(--au-muted);
}

/* ---- the copy control ----
   The BUTTON is the shared TraderCopyButton — its markup is not this skin's to
   change, so au reaches it by element. Its label varies with state (Copy /
   Choose duration / N days left / BUY), which is the control telling the truth
   about what the click will do. */

.au-trader-copy {
  margin-top: 16px;
}

.au-trader-copy .btn,
.au-trader-copy a.btn,
.au-trader-copy > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  line-height: normal;
  border-radius: var(--au-radius);
  background: var(--au-indigo);
  color: var(--au-on-accent);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.au-trader-copy .btn:hover,
.au-trader-copy > a:hover {
  background: var(--au-purple);
}

.au-trader-copy .btn[disabled] {
  background: var(--au-panel-raised);
  color: var(--au-muted);
}

.au-traders-agreement {
  margin-top: 22px;
  text-align: center;
}

.au-traders-agreement a {
  font-size: 14px;
  color: var(--background-link-colour);
}


@media only screen and (max-width: 600px) {
  /* The shell (.au-tt-main) already gutters every user page. The dashboard was
     adding its own on top, so a phone lost 32px a side to padding alone. */
  .au-db {
    padding: 14px 0 36px;
  }

  .au-trader-card,
  .au-db-balance,
  .au-db-signal {
    padding: 14px;
  }

  .au-trader-identity h5 {
    font-size: 19px;
  }
}


/* ---- dashboard shortcuts ----
   The three coloured pills above the balances. Solid brand colours rather than
   the tinted grounds used elsewhere on the page: these are the one place on the
   dashboard meant to be reached for, so they carry full weight. */

.au-db-shortcuts {
  margin-bottom: 4px;
}

.au-db-shortcut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 10px;
  border-radius: var(--au-radius);
  color: var(--au-on-accent);
  text-align: center;
}

.au-db-shortcut .material-icons {
  font-size: 19px;
  flex: none;
}

/* The label WRAPS rather than being clipped. It used to ellipsise, which read
   as "Copy E…" and "Tradin…" on any narrow-but-not-tiny screen — the pill is a
   destination, and a destination you cannot read is not one. */
.au-db-shortcut b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.au-db-shortcut:hover {
  opacity: 0.9;
}

.au-db-shortcut-blue {
  background: var(--au-blue);
}

.au-db-shortcut-indigo {
  background: var(--au-indigo);
}

.au-db-shortcut-teal {
  background: var(--au-teal);
}

/* A third of a 320px screen leaves ~62px inside a pill. "Copy Experts" needs
   about 78px on one line at any readable size, so side-by-side icon and label
   cannot fit and the label was being ellipsised to "Copy…". Stacking the icon
   over the label hands the text the pill's full width and lets it wrap to two
   lines, which fits — no truncation, and still three across as in the
   reference. */
@media only screen and (max-width: 600px) {
  .au-db-shortcut {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: auto;
    min-height: 52px;
    padding: 8px 4px;
  }

  .au-db-shortcut .material-icons {
    font-size: 17px;
  }

  .au-db-shortcut b {
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}


/* ============================================================
   (user) chrome — the shell every /user/* route wears

   Ported from the ol skin's terminal shell at the user's request:
   topbar + drawer + phone dock + page slot. COPIED, not imported —
   ai-rules 11 makes a skin self-contained, so the namespace is
   au-tt-* here and the rules live in this one stylesheet.

   What was NOT carried over is ol's navy terminal palette. ol
   applies it as inline vars on its shell root to override the guest
   colours; au's :root palette is already the right one for this
   area, so the shell just inherits it and the skin keeps its own
   near-black-and-indigo identity.

   ol's ~2800 lines of ol-tt rules are mostly its terminal PAGES
   (chart pane, order panel, instrument picker, positions). Only the
   shell chrome is here.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   au (user) — THE SHELL
   ══════════════════════════════════════════════════════════════
   Scoped under .au-tt, the shell root in (user)/_layout.js. Unlike
   the ol shell this came from, no inline css vars are set on that
   root: the colours are the skin's own :root palette from skin.js,
   which already suits the user area.

   Extracted with postcss, not by hand. The first pass used a
   brace-matching script that mis-parsed and silently dropped the
   whole 992px block — which is where the phone DOCK lives, so the
   bottom bar had its base rules and none of its layout.
   ══════════════════════════════════════════════════════════════ */

.au-tt {
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Signika Negative', sans-serif;
  font-size: 14px;
}

.au-tt b,
.au-tt .notranslate {
  font-variant-numeric: tabular-nums;
}

.au-tt-terminal {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.au-tt-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.au-tt-terminal .au-tt-body {
  height: 100%;
  min-height: 0;
}

.au-tt-menu-trigger {
  flex: 0 0 auto;
}

.au-tt-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--au-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.au-tt-nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.au-tt-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 210;
  width: 300px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  background: var(--primary-background);
  border-right: 1px solid var(--border-colour);
  box-shadow: var(--au-drawer-shadow);
  transform: translateX(-102%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.au-tt-nav.is-open {
  transform: translateX(0);
}

.au-tt-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: 58px;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid var(--border-colour);
}

.au-tt-nav-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--background-heading-colour);
}

.au-tt-nav-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
}

.au-tt-nav-group {
  margin-bottom: 14px;
}

.au-tt-nav-group h3 {
  margin: 0 0 4px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.au-tt-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--background-font-colour);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.au-tt-nav-link:hover {
  background: var(--hover);
  color: var(--background-heading-colour);
}

.au-tt-nav-link.is-active {
  background: var(--secondary-background);
  color: var(--primary-button);
}

.au-tt-nav-foot {
  flex: 0 0 auto;
  padding: 8px 10px 12px;
  border-top: 1px solid var(--border-colour);
}

.au-tt-nav-out {
  color: var(--au-down);
}

.au-tt-nav-out:hover {
  background: var(--au-down-soft);
  color: var(--au-down);
}

.au-tt-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--primary-font-colour);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.au-tt-rail-item small {
  font-size: 9.5px;
  letter-spacing: 0.2px;
}

.au-tt-rail-item:hover {
  color: var(--background-heading-colour);
}

.au-tt-rail-item.is-active {
  color: var(--primary-button);
}

.au-tt-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  height: 58px;
  padding: 0 16px;
  background: var(--primary-background);
  border-bottom: 1px solid var(--border-colour);
}

.au-tt-topbar-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--background-heading-colour);
}

.au-tt-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.au-tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--background-heading-colour);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.au-tt-btn-primary {
  background: var(--primary-button);
  color: var(--au-on-accent);
}

.au-tt-btn-primary:hover {
  filter: brightness(1.1);
}

.au-tt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.au-tt-icon-btn:hover {
  background: var(--hover);
  color: var(--background-heading-colour);
}

.au-tt-icon-btn.is-active {
  background: var(--secondary-background);
  color: var(--primary-button);
}

.au-tt-main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px 40px;
}

.au-tt-terminal .au-tt-main,
.au-tt-main.au-tt-flush {
  display: flex;
  padding: 0;
  overflow: hidden;
}

.au-tt-main.au-tt-flush > .tab-fade {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.au-tt-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.au-tt-live {
  display: block;
  line-height: 1.2;
  text-align: right;
  color: inherit;
}

.au-tt-live small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  color: var(--primary-font-colour);
}

.au-tt-live b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.au-tt-home-bar .au-tt-btn {
  gap: 6px;
  height: 38px;
}

.au-tt .collection .collection-item.au-tt-mine {
  padding: 0;
}

.au-tt .collection .collection-item.au-tt-hold {
  padding: 16px 18px;
}

.au-tt .collection .collection-item.au-tt-dep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.au-tt .collection .collection-item.au-tt-stake {
  padding: 0;
}

.au-tt-ref-row .au-tt-btn {
  flex: 0 0 auto;
  gap: 6px;
  height: 38px;
}

.au-tt .collection .collection-item.au-tt-ref {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.au-tt .collection .collection-item {
  padding: 14px 18px;
}

.au-tt .collection .collection-item > .row {
  margin-bottom: 0;
}

.au-tt .collection .collection-item img {
  border-radius: 50%;
  object-fit: cover;
}

.au-tt-watchlist .au-tt-btn {
  gap: 6px;
  margin-left: auto;
}

.au-tt-dock {
  display: none;
}

.au-tt-dock-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-button);
  color: var(--au-on-accent);
}

.au-tt-dock-fab.is-active {
  box-shadow: 0 0 0 3px var(--secondary-background);
}

.au-tt-identity-actions .au-tt-btn {
  flex: 1 1 0;
  gap: 6px;
  cursor: pointer;
}

.au-tt .au-tt-expert-grid .collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.au-tt .au-tt-expert-grid .collection .collection-item.au-tt-expert {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-colour);
  border-bottom: 1px solid var(--border-colour);
  border-radius: 16px;
  background: var(--primary-background);
}

.au-tt .card,
.au-tt .card-panel,
.au-tt .collection {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  box-shadow: none;
  color: var(--background-font-colour);
}

.au-tt .collection {
  overflow: hidden;
}

.au-tt .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  color: var(--background-font-colour);
}

.au-tt .collection .collection-item:last-child {
  border-bottom: none;
}

.au-tt h1,
.au-tt h2,
.au-tt h3,
.au-tt h4,
.au-tt h5,
.au-tt h6 {
  color: var(--background-heading-colour);
}

.au-tt table {
  color: var(--background-font-colour);
}

.au-tt th {
  color: var(--background-heading-colour);
}

.au-tt td,
.au-tt th {
  border-bottom: 1px solid var(--border-colour);
}

.au-tt input[type='text'],
.au-tt input[type='email'],
.au-tt input[type='password'],
.au-tt input[type='number'],
.au-tt input[type='date'],
.au-tt input[type='search'],
.au-tt textarea,
.au-tt select.browser-default {
  color: var(--background-heading-colour);
  border-bottom: 1px solid var(--border-colour);
}

.au-tt select.browser-default {
  padding: 8px 10px;
  border: 1px solid var(--border-colour);
  border-radius: 9px;
  background: var(--secondary-background);
}

.au-tt .au-tt-field select.browser-default {
  padding: 0;
  border: none;
  background: transparent;
}

.au-tt label,
.au-tt .grey-text {
  color: var(--primary-font-colour) !important;
}

.au-tt .btn,
.au-tt .btn-large {
  border-radius: 9px;
  background-color: var(--primary-button);
  box-shadow: none;
  font-family: inherit;
  letter-spacing: 0.3px;
}

.au-tt .btn:hover,
.au-tt .btn-large:hover {
  box-shadow: none;
  filter: brightness(1.1);
}

.au-tt .btn.green {
  background-color: var(--au-up) !important;
}

.au-tt .btn.red {
  background-color: var(--au-down) !important;
}

.au-tt .tabs {
  background: transparent;
}

.au-tt .tabs .tab a {
  color: var(--primary-font-colour);
}

.au-tt .tabs .tab a.active,
.au-tt .tabs .tab a:hover {
  color: var(--background-heading-colour);
}

.au-tt .tabs .indicator {
  background-color: var(--primary-button);
}

.au-tt .dropdown-content {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
}

.au-tt .dropdown-content li > a,
.au-tt .dropdown-content li > span {
  color: var(--background-heading-colour);
}

.au-tt .progress {
  background-color: var(--secondary-background);
}

@media only screen and (max-width: 992px) {
  .au-tt {
    padding-bottom: 56px;
  }

  .au-tt-desk-only {
    display: none !important;
  }

  .au-tt-topbar {
    height: 54px;
    padding: 0 12px;
  }

  .au-tt-topbar-brand {
    font-size: 15px;
  }

  .au-tt-main {
    padding: 14px 12px 30px;
  }

  .au-tt-live {
    margin-right: auto;
    text-align: left;
  }

  .au-tt-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 195;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 2px;
    background: var(--primary-background);
    border-top: 1px solid var(--border-colour);
  }

  .au-tt-dock .au-tt-rail-item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    height: 40px;
    padding: 0;
  }

  .au-tt-dock .au-tt-dock-fab {
    flex: 0 0 38px;
    margin: 0 2px;
  }

  .au-tt-dock .au-tt-rail-item small {
    display: none;
  }

  .au-tt-nav {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 84vh;
    border-right: none;
    border-top: 1px solid var(--border-colour);
    border-radius: 18px 18px 0 0;
    transform: translateY(102%);
    box-shadow: var(--au-sheet-shadow);
  }

  .au-tt-nav.is-open {
    transform: translateY(0);
  }

  .au-tt-nav-head {
    height: 52px;
  }

  .au-tt-nav-body {
    padding: 10px 12px;
  }

  .au-tt-nav-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .au-tt-nav-group h3 {
    grid-column: 1 / -1;
    margin: 2px 0 0 2px;
  }

  .au-tt-nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-height: 76px;
    padding: 10px 6px;
    border: 1px solid var(--border-colour);
    background: var(--secondary-background);
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  .au-tt-nav-foot {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px 12px 22px;
  }

  .au-tt-nav-foot .au-tt-nav-link {
    flex-direction: row;
    min-height: 44px;
    font-size: 13px;
  }

  .au-tt-home-bar .au-tt-btn {
    flex: 1 1 0;
  }

  .au-tt .collection .collection-item {
    padding: 10px 12px;
  }
}

@media only screen and (max-width: 992px) and (max-height: 720px) {
  .au-tt-topbar {
    height: 48px;
  }
}

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


/* ---- phone gutters ----
   Stated here, at the END of the file, on purpose. The shell's own
   `.au-tt-main { padding: 18px 20px 40px }` is declared further up in the
   (user) chrome section; a media query adds NO specificity, so an override
   written earlier loses to it at every width and the page kept its 20px
   gutters on a phone. Same weight, later in the file, so this one applies. */
@media only screen and (max-width: 600px) {
  .au-tt-main {
    padding: 14px 10px 32px;
  }
}


/* ---- the books on a phone ----
   The reference keeps a real TABLE on a phone, so this does too — stacking the
   rows into cards lost that entirely. It fits by dropping the two widest
   columns rather than by scrolling sideways: Price and P/L on the open book,
   Closed and Profit on the settled one. Four columns, matching the reference
   exactly, with nothing added back in.

   NOTE: the dropped Price column is where ai-rules 12 lives — live prices on a
   self-placed trade, the trader's name on one placed for the user. At this
   width that rule is served by the trade's own view (?tab=view), not here.

   The header stays put, so the columns still sort by tapping them. */

@media only screen and (max-width: 600px) {
  /* no min-width, so the table can never be wider than the screen */
  .au-db-table {
    min-width: 0;
  }

  .au-db-wide {
    display: none;
  }

  .au-db-table th,
  .au-db-table td {
    padding: 10px 6px;
  }

  .au-db-table thead th {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  .au-db-sort {
    font-size: 14px;
    vertical-align: -3px;
  }

  .au-db-table td {
    font-size: 12px;
  }

  .au-db-symbol {
    gap: 6px;
  }

  .au-db-symbol img {
    width: 20px;
    height: 20px;
  }

  .au-db-symbol b {
    font-size: 12px;
  }

  .au-db-type,
  .au-db-result,
  .au-db-outcome {
    padding: 3px 6px;
    font-size: 10px;
  }

  .au-db-amount b {
    font-size: 12px;
  }

  .au-db-amount small {
    font-size: 10px;
  }
}


/* ---- price ticker ----
   A moving row of price cards, each with a sparkline. The track holds the list
   twice and travels exactly one copy, so the loop has no seam. */

.au-ticker {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--au-hairline);
  border-bottom: 1px solid var(--au-hairline);
}

.au-ticker-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: au-ticker 60s linear infinite;
}

/* One copy of the list is 50% of the doubled track. */
@keyframes au-ticker {
  to {
    transform: translateX(-50%);
  }
}

.au-ticker:hover .au-ticker-track {
  animation-play-state: paused;
}

.au-tick {
  flex: 0 0 auto;
  width: 250px;
  padding: 14px 16px;
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-radius);
  background: var(--au-panel);
}

.au-tick-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.au-tick-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
}

.au-tick-sym {
  font-size: 14px;
  font-weight: 600;
  color: var(--background-heading-colour);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.au-tick-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.au-tick-figures {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.au-tick-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.au-tick-chg {
  font-size: 13px;
  font-weight: 600;
}

.au-tick-chg.is-up {
  color: var(--au-up);
}

.au-tick-chg.is-down {
  color: var(--au-down);
}

/* The line is sized by its box, not by the viewBox — preserveAspectRatio is
   none on the svg, so the path stretches to whatever width the card gives it
   while the stroke stays even (vector-effect on the path). */
.au-tick-spark {
  width: 110px;
  height: 40px;
  flex: none;
}

/* The stroke follows the card's direction. The class is on the CARD rather than
   read off the change span with :has() — same result without leaning on a
   selector that not every browser in the wild supports yet. */
.au-tick.is-up .au-tick-spark path {
  stroke: var(--au-up);
}

.au-tick.is-up .au-tick-spark circle {
  fill: var(--au-up);
}

.au-tick.is-down .au-tick-spark path {
  stroke: var(--au-down);
}

.au-tick.is-down .au-tick-spark circle {
  fill: var(--au-down);
}

@media only screen and (max-width: 600px) {
  .au-tick {
    width: 210px;
    padding: 12px;
  }

  .au-tick-spark {
    width: 84px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .au-ticker-track {
    animation: none;
  }
}

@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  /* Last-resort value only — skin.js writes --primary-button on :root from
     NODE_PRIMARY (or the active skin's entry in SKIN_PRIMARY), and an inline
     style out-ranks this. */
  --primary-button: #766fb2;

  /* material-resets-public.css styles .btn-alt-secondary, .btn-trans-secondary
     and .btn-alt-secondary:hover out of this token, but nothing in the repo has
     ever DEFINED it — those three rules have always resolved var() to nothing,
     which makes the whole declaration invalid at computed-value time, so the
     border and text colour silently fell back to inherited values. A mid slate
     reads against both the light and the dark themes. */
  --secondary-button: #6078a9;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;
}

iframe[src*='embed-widget'] {
  pointer-events: none;
}

#goog-gt-vt {
  display: none;
}

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

/* Hide the Google Translate top banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

/* The default app's face. Set on BODY, not on .ap — that class is only on the
   guest layout, so /user and /cp were falling back to Materialize's default
   and the three areas did not match. The app stylesheet is the last one the
   shells load, so this wins on order without needing !important. */
:root {
  --ap-font: 'Signika Negative', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--ap-font);
}

/* SCOPING (CRITICAL): this stylesheet used to be a skin's own _css/ap.css, so
   it could style bare `body`/`h1`/`.btn`. It now lives in the DEFAULT tree and
   is imported by app/(guest)/_layout.js, which means it bundles for EVERY skin
   — an unscoped rule here repaints every other skin's buttons and headings.
   So the design-wide rules below are scoped to `.ap`, the wrapper the default
   guest chrome renders. A skin that ships its own (guest)/_layout.js never
   renders that wrapper, so it keeps its own typography and buttons. Everything
   else in this file is already `.ap-*` prefixed — keep it that way. */
.ap {
  font-size: 16px;
  font-family: var(--ap-font);
}

/* Materialize pins .btn to `height: 36px; line-height: 36px`, so vertical
   padding alone cannot make the button taller — with box-sizing: border-box it
   only shrinks the content box while the 36px line box still starts BELOW the
   top padding, dropping the label ~7.5px under centre. That read as too much
   padding on top. Releasing the fixed height and the 36px line-height lets the
   padding do what it was written to do and re-centres the label. */
.ap .btn {
  height: auto;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 20px;
}

.ap .btn.btn-secondary {
  border-color: #334155;
}

/* ─── Language switcher ────────────────────────────────────────────────────
   Rendered from the footer but pinned to the viewport, matching the reference.
   Bottom-LEFT on purpose: bottom-right is where support/chat buttons live. */
.ap .ap-translator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
}

.ap .ap-translator-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ap .ap-translator-trigger .material-icons {
  font-size: 18px;
}

/* Catches the click that closes the panel without dimming the page. */
.ap .ap-translator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ap .ap-translator-list {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 2;
  width: 220px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.ap .ap-translator-list li {
  margin: 0;
}

.ap .ap-translator-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.ap .ap-translator-list a:hover {
  background: var(--hover);
}

.ap .ap-translator-current {
  font-weight: 600;
  background: var(--hover);
}

/* ─── Nav brand ────────────────────────────────────────────────────────────
   An <img> in a Materialize nav sits on the text baseline of a 64px
   line-height, which parks a 36px logo well above centre — the markup used to
   correct that with an inline `top: -8px`, which still left it 21px high and
   clipping the top of the bar. Centring it properly needs no magic number. */
.ap nav .ap-nav-brand a {
  display: flex;
  align-items: center;
  height: 64px;
  margin-left: -10px; /* optical: pulls the mark back to the container edge */
}

.ap nav .ap-nav-brand img {
  display: block;
}

/* ─── Hero background video ────────────────────────────────────────────────
   The section keeps its own dark `bg bg-secondary` surface, so a failed or
   still-buffering video degrades to exactly what was there before rather than
   to a blank band. The video is painted over that, the overlay over the video,
   and the copy over the overlay. */
.ap .ap-hero {
  position: relative;
  overflow: hidden;
}

.ap .ap-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none; /* decoration — never eats a click or a scroll */
}

/* Without this the copy would have to survive whatever frame is behind it. */
.ap .ap-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 1, 33, 0.55);
}

.ap .ap-hero-inner {
  position: relative; /* lifts the copy above the video + overlay */
}

/* ─── The nav sits ON the hero video ───────────────────────────────────────
   This nav is a normal in-flow element (no Materialize .navbar-fixed), so the
   hero begins BELOW it and .ap-hero's overflow:hidden clips the video short of
   the bar. Lifting the nav out of flow lets the hero start at y=0 and paint
   its video the full height, nav included.

   :has() keeps all of this to pages that actually have a hero — every other
   guest page keeps its normal in-flow, solid bar. */
.ap:has(.ap-hero) {
  position: relative; /* containing block for the nav below */
}

.ap:has(.ap-hero) nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* over the hero's video AND its overlay */
}

/* The nav no longer occupies flow, so the hero owes its content that height. */
.ap:has(.ap-hero) .ap-hero {
  padding-top: 64px;
}

/* No scroll-toggle back to a solid bar: this nav is not sticky, so it simply
   scrolls away with the hero and never ends up over other content. */
.ap:has(.ap-hero) nav {
  background: transparent;
  box-shadow: none;
}

.ap h1 {
  font-size: 72px;
  font-weight: 600;
}

.ap h2 {
  font-size: 40px;
  font-weight: 600;
}

/* ─── ap mobile drawer menu (skin-local, no M.Sidenav) ──────────────────── */

.ap-menu-trigger {
  cursor: pointer;
}

.ap-menu-trigger .material-icons {
  font-size: 28px;
  vertical-align: middle;
}

.ap-drawer-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  pointer-events: none;
}

.ap-drawer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(4, 6, 16, 0.62);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ap-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  padding: 26px 24px 30px;
  overflow-y: auto;
  background: #10152a; /* solid fallback when backdrop-filter unsupported */
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -30px 0 70px rgba(4, 6, 16, 0.55);
  color: #e2e8f0;
  font-family: var(--ap-font);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ap-drawer {
    background: rgba(12, 15, 25, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* hairline indigo shine across the drawer top — same motif as the ap signin card */
.ap-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.75), rgba(129, 140, 248, 0));
}

.ap-drawer-root.ap-open {
  pointer-events: auto;
}

.ap-drawer-root.ap-open .ap-drawer-overlay {
  opacity: 1;
}

.ap-drawer-root.ap-open .ap-drawer {
  transform: translateX(0);
}

.ap-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ap-drawer-brand {
  display: flex;
  align-items: center;
}

.ap-drawer-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
}

.ap-drawer-brand span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.ap-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #a5b4fc;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-drawer-close:hover {
  background: rgba(79, 70, 229, 0.32);
  color: #ffffff;
}

.ap-drawer-close .material-icons {
  font-size: 21px;
}

.ap-drawer-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.8);
}

.ap-drawer-links {
  margin: 0 0 24px;
}

.ap-drawer-links li {
  list-style: none;
}

.ap-drawer-links a {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ap-drawer-links a .material-icons {
  font-size: 20px;
  margin-right: 12px;
  color: #818cf8;
}

.ap-drawer-links a:hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: rgba(129, 140, 248, 0.3);
  color: #ffffff;
}

.ap-drawer-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.4);
}

.ap-drawer-cta p {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: rgba(226, 232, 240, 0.5);
}

/* ─── ap page hero strip (contact + article pages) ──────────────────────── */

.ap-page-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}

.ap-page-hero::before {
  content: '';
  position: absolute;
  top: -280px;
  left: 50%;
  width: 920px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.42) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.6), rgba(129, 140, 248, 0));
}

.ap-hero-inner {
  position: relative;
}

.ap-hero-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #a5b4fc;
}

.ap-page-hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: 46px;
  color: #ffffff;
}

.ap-hero-sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(226, 232, 240, 0.7);
}

/* ─── ap shared frosted card ────────────────────────────────────────────── */

.ap-card {
  position: relative;
  padding: 2.2rem 2.4rem;
  background: var(--primary-background);
  border: 1px solid var(--primary-border-colour);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.1);
}

.ap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.65), rgba(129, 140, 248, 0));
}

/* ─── ap contact page ───────────────────────────────────────────────────── */

.ap-contact {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-contact-panel {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  background: #0c0f19;
  background-image: linear-gradient(180deg, #0f1428 0%, #0c0f19 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  color: #e2e8f0;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.25);
}

.ap-contact-panel::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-contact-panel h5 {
  position: relative;
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.ap-contact-panel-sub {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: rgba(226, 232, 240, 0.65);
}

.ap-contact-list {
  position: relative;
  margin: 0;
}

.ap-contact-list li {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: 15px;
  color: rgba(226, 232, 240, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  list-style: none;
}

.ap-contact-list li:last-child {
  border-bottom: 0;
}

.ap-contact-list .material-icons {
  font-size: 19px;
  margin-right: 12px;
  padding: 6px;
  color: #818cf8;
  background: rgba(79, 70, 229, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 9px;
}

.ap-contact-card h5 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ap-contact-card-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .input-field input[type='text'],
.ap-contact .ap-card .input-field input[type='email'],
.ap-contact .ap-card .input-field textarea {
  box-sizing: border-box;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--primary-border-colour);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-contact .ap-card .input-field input[type='text']:focus,
.ap-contact .ap-card .input-field input[type='email']:focus,
.ap-contact .ap-card .input-field textarea:focus {
  outline: none;
  border: 1px solid #4f46e5;
  border-bottom: 1px solid #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

.ap-contact .ap-card .input-field label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .btn-full {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.35);
}

/* ─── ap article page ───────────────────────────────────────────────────── */

.ap-article {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-article-card {
  padding: 2.6rem 2.8rem;
  font-size: 17px;
  line-height: 1.85;
  color: var(--background-font-colour);
}

.ap-article-card > div {
  margin-bottom: 0.35rem;
}

.ap-article-card b {
  color: var(--background-heading-colour);
}

.ap-article-card img.responsive-img,
.ap-article-card video {
  border-radius: 14px;
}

@media (min-width: 319px) and (max-width: 490px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .ap-drawer {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-radius: 0;
  }

  .ap-page-hero {
    padding: 3rem 0 3.4rem;
  }

  .ap-page-hero h1 {
    font-size: 30px;
  }

  .ap-card {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }

  .ap-contact {
    padding-top: 2rem;
  }

  .ap-contact-panel {
    padding: 1.8rem 1.4rem;
    border-radius: 18px;
  }

  .ap-article {
    padding-top: 2rem;
  }

  .ap-article-card {
    padding: 1.8rem 1.3rem;
    font-size: 16px;
  }
}

/* ─── Reviews wall ─────────────────────────────────────────────────────────
   DELIBERATELY NOT `.ap`-SCOPED, unlike everything above. APReviewsComponent is
   reached through TourContentComponent, which 24 skins render, and a skin with
   its own (guest)/_layout.js never emits the `.ap` wrapper — scoping these
   would blank the cards there and let the page colour show through (that was
   the blue tint in `ad`, whose --background-colour is #e6f3fd).

   Safe to leave unscoped because every selector is named `.ap-review*`, which
   only ever matches markup this one component renders. Colours come from the
   theme vars, so each skin's palette applies on its own. */

.ap-reviews {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  height: 49rem;
  max-height: 150vh;
  overflow: hidden;
  padding: 0 1rem;
  margin-top: 3rem;
  align-items: start;
}

@media (min-width: 601px) {
  .ap-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 993px) {
  .ap-reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Columns beyond the first only exist at the widths that can hold them. */
.ap-reviews-col:nth-child(2),
.ap-reviews-col:nth-child(3) {
  display: none;
}

@media (min-width: 601px) {
  .ap-reviews-col:nth-child(2) {
    display: block;
  }
}

@media (min-width: 993px) {
  .ap-reviews-col:nth-child(3) {
    display: block;
  }
}

.ap-reviews-col {
  animation-name: ap-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Different speeds keep the columns from marching in step. */
.ap-reviews-slow {
  animation-duration: 62s;
}
.ap-reviews-mid {
  animation-duration: 48s;
}
.ap-reviews-fast {
  animation-duration: 74s;
}

@keyframes ap-marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.ap-review {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin: 0 0 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ap-reviews-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.ap-reviews-stars .material-icons {
  font-size: 20px;
  color: #06b6d4;
}

.ap-review blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--background-font-colour);
}

.ap-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-colour);
}

.ap-review figcaption img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* The window's edges dissolve rather than being cut off. This is a MASK on the
   wall itself, not two gradient overlays painted in --background-colour, which
   is what it used to be: those assumed the wall always sat on the page colour,
   so anywhere it sat on a different surface — inside `.bg` (white), or in a
   skin whose page colour differs — the gradients showed as a tint over it.
   A mask fades the cards themselves and therefore needs no colour at all. */
.ap-reviews {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
}

/* Motion is decoration here — the cards are all still readable standing still. */
@media (prefers-reduced-motion: reduce) {
  .ap-reviews-col {
    animation: none;
  }
}

/* ============================================================
   (user) — dashboard area
   Moved here from (user)/user.css: the default skin has ONE
   stylesheet, same rule every skin follows (see ai-rules.md).
   ============================================================ */

/* Tab switches. The tab wrapper in a route file is keyed on the active tab
   (see wallets.js), so switching remounts that node and replays this
   animation — no transition library and no exit state to coordinate. Keep it
   short: this sits between the click and the content. */
.tab-fade {
  animation: tab-fade-in 220ms ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-fade {
    animation: none;
  }
}

/* ─── Asset chart (holding / mining asset tabs) ────────────────────────────
   BrokerChartsComponent fills its container, and this one had no height — so
   under two full-height buy/sell panels the chart collapsed to the widget's
   own minimum. Every wrapper down to the iframe has to be stretched, since
   the TradingView levels ask for height:100% and that resolves to nothing
   unless each ancestor has one. */

.app-asset-chart {
  height: 55vh;
  margin-top: 8px;
}

.app-asset-chart > *,
.app-asset-chart .tradingview-widget-container,
.app-asset-chart .tradingview-widget-container > div:first-child,
.app-asset-chart iframe {
  width: 100%;
  height: 100%;
}

.app-asset-chart .tradingview-widget-copyright {
  display: none;
}



/* LiveChartComponent stamps the symbol as an <h2> over the top-left of the
   plot. The page heading above already names the asset, so it is the same
   word twice — and at that size it covers the first candles. */
.app-asset-chart h2 {
  display: none;
}

/* app.css disables pointer events on every TradingView embed
   (`iframe[src*='embed-widget']`) so the DECORATIVE ones — the guest ticker
   tape, the mini sparklines — cannot swallow clicks or scroll.
   This chart is not decorative: its range switcher (1D · 1M · 3M · 1Y · 5Y ·
   All) is the whole point, and the blanket rule made those tabs dead. Give
   the interaction back here only, rather than lifting the rule globally. */
.app-asset-chart iframe[src*='embed-widget'] {
  pointer-events: auto;
}


/* ═══ /user — the dashboard ═══════════════════════════════════════════════
   Modelled on the lqo wallet layout: a glow hero carrying the headline figure
   and two pills, then two panels of rows beneath it.

   The classes are the DEFAULT skin's own (db-*), not lqo's — a skin never
   reaches into another skin's stylesheet (ai-rules #11), so the look is
   reproduced here rather than borrowed.

   Three answers and nothing else: what the account is worth, the two balances
   behind that figure, and how the closed trades have gone. */

.db-hero {
  margin: -18px -18px 20px -18px;
  padding: 30px 20px;
  border-radius: 0 0 28px 28px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(230, 255, 42, 0.3), transparent 62%),
    linear-gradient(180deg, #232b06 0%, #11150a 68%, #05060a 100%);
}

.db-hero small {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
}

.db-hero h2 {
  margin: 4px 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  /* Tabular figures so the headline does not jitter as the live number ticks. */
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.db-hero-pnl {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
}

.db-up {
  color: #0eba1f;
}

.db-down {
  color: #e5484d;
}

.db-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.db-pill:hover {
  transform: translateY(-1px);
}

.db-pill .material-icons {
  font-size: 17px;
}

.db-pill-volt {
  background: #e6ff2a;
  color: #030507;
}

.db-pill-white {
  background: #ffffff;
  color: #030507;
}

/* ─── Panels ────────────────────────────────────────────────────────────
   Side by side on a desktop, stacked on a phone. */

.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

.db-section {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  padding: 14px 16px;
}

/* Holds the panel's heading. Kept as a flex row so a control can sit beside
   the title later without the heading jumping. */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.db-section-head h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--background-heading-colour);
}

.db-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-row:hover {
  background: var(--hover);
}

.db-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: var(--background-colour);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  flex: 0 0 auto;
}

.db-row-icon .material-icons {
  font-size: 19px;
}

.db-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.db-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-row-name small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.db-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.db-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

/* The live row gets a quiet pulse so a number that moves does not look like a
   stored one. */
.db-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0eba1f;
  margin-right: 6px;
  vertical-align: middle;
  animation: db-pulse 2.4s ease-in-out infinite;
}

@keyframes db-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .db-live-dot { animation: none; }
}

@media (max-width: 600px) {
  .db-hero h2 {
    font-size: 34px;
  }
}

/* ─── Shared lists inside a db-section ──────────────────────────────────
   The trade lists, watchlist and their kin are Materialize `collection`
   markup and stay that way: open positions carry live profit, a countdown, a
   close button and the trader-name rule, and re-drawing those rows to match
   these panels would mean re-implementing all of it.

   So the PANEL adapts instead — the collection loses its own card edge and
   sits on the panel's rhythm rather than looking like a second card dropped
   inside the first. */

.db-section .collection {
  border: 0;
  margin: 0;
  list-style: none;
  padding-left: 0;
  background: transparent;
}

.db-section .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-section .collection .collection-item:last-child {
  border-bottom: 0;
}

.db-section .collection .collection-item:hover {
  background: var(--hover);
}

/* The ticket's inputs are Materialize columns inside a panel that is already
   padded, so the row's negative gutters would push them past the edge. */
.db-section form .row {
  margin-left: 0;
  margin-right: 0;
}

/* A panel that stands on its own rather than sitting in the two-column grid —
   for rows too wide to survive half the content width. */
.db-section-stacked {
  margin-top: 18px;
}


/* ---- withdrawal view ----
   The label/value lines in the transaction summary. Materialize rows carry a
   20px bottom margin, which stacked four of them into a very tall card. */
.wv-line {
  margin-bottom: 0 !important;
}

.wv-line .col {
  padding-top: 4px;
  padding-bottom: 4px;
}