@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap);
/* 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 svg {
  display: block;
  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;
}


/* PR (Proline-style) design — scoped styles
 * Rules: only theme-system CSS vars (set in prThemeReducer.js),
 *        no design-specific vars, single @media block at the bottom.
 *
 * Typography matches Proline source:
 *   - Display/headings: "Sora" (geometric, free Google Fonts substitute for Mori),
 *     semibold 600, with -0.02em tracking
 *   - Body / UI / numerics: "Inter" 400/500/600
 */

/* ===== Proline animations ===== */
@keyframes pr-rotate-border-line {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 14px; }
}

@keyframes pr-rotate-pill-border {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 4px; }
}

@keyframes pr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pr-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes pr-shimmer-reverse {
  0% { left: 200%; }
  100% { left: -100%; }
}

@keyframes pr-letter-slide-in {
  0% { opacity: 0; filter: blur(2px); transform: translateY(3px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes pr-orb-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pr-fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== Rotating dashed border (SVG) wrapper =====
 * Drop <PRBorder /> inside any position: relative element.
 * The SVG fills the bounding box and animates stroke-dashoffset
 * for the "marching ants" effect Proline uses on every card/pill.
 */
.pr .pr-rotating-border {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  overflow: visible;
  z-index: 0;
}

.pr .pr-rotating-border svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pr .pr-rotating-border rect {
  fill: none;
  stroke: var(--border-colour);
  stroke-width: 1px;
  stroke-dasharray: 6 8;
  animation: 3s linear infinite pr-rotate-border-line;
  vector-effect: non-scaling-stroke;
}

.pr .pr-rotating-border-tight rect {
  stroke-dasharray: 2 2;
  animation: 3s linear infinite pr-rotate-pill-border;
}

/* ===== Shimmer hover overlay ===== */
.pr .pr-shimmer-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.pr .pr-shimmer-overlay,
.pr .pr-shimmer-overlay-reverse {
  position: absolute;
  top: 0;
  height: 100%;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(190, 167, 255, 0.10) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
}

.pr .pr-shimmer-overlay { left: -100%; }
.pr .pr-shimmer-overlay-reverse { left: 200%; }

.pr .pr-feature-card:hover .pr-shimmer-overlay {
  animation: 0.8s ease-in-out forwards pr-shimmer;
}

.pr .pr-feature-card:hover .pr-shimmer-overlay-reverse {
  animation: 0.8s ease-in-out forwards pr-shimmer-reverse;
}

/* ===== Float ===== */
.pr .pr-float {
  animation: 5s ease-in-out infinite pr-float;
}

/* ===== Section backlight ===== */
.pr .pr-backlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(113, 50, 245, 0.06) 0%, transparent 40%);
  opacity: 0.6;
  transition: opacity 0.3s;
}

/* Make sure all real card content sits above border/shimmer/backlight.
 * Don't set overflow:hidden on cards — that would clip the rotating
 * stroke. Clipping happens inside .pr-shimmer-wrap instead. */
.pr .pr-feature-card,
.pr .pr-review-card,
.pr .pr-pill,
.pr .pr-stats-card {
  position: relative;
}

.pr .pr-feature-card > *:not(.pr-rotating-border):not(.pr-shimmer-wrap),
.pr .pr-review-card > *:not(.pr-rotating-border):not(.pr-shimmer-wrap),
.pr .pr-pill > *:not(.pr-rotating-border) {
  position: relative;
  z-index: 2;
}

/* Pill gradient text + arrow chip — Proline pillText style */
.pr .pr-pill-text {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-button) 70%, white) 0%,
    color-mix(in srgb, var(--primary-button) 80%, white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pr .pr-pill-arrow {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.pr .pr-pill-arrow svg {
  display: block;
}

/* Section "in view" reveal — base state set in JSX with .pr-reveal,
 * elements animate on intersection (added via .pr-revealed class) */
.pr .pr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.pr .pr-reveal.pr-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveals when multiple items appear in the same viewport */
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(1) .pr-reveal { transition-delay: 0ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(2) .pr-reveal { transition-delay: 80ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(3) .pr-reveal { transition-delay: 160ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(4) .pr-reveal { transition-delay: 240ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(5) .pr-reveal { transition-delay: 320ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(6) .pr-reveal { transition-delay: 400ms; }

.pr {
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Signika Negative', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  min-height: 100vh;
  overflow-x: hidden;
}

.pr h1,
.pr h2,
.pr h3,
.pr h4,
.pr h5,
.pr h6 {
  color: var(--background-heading-colour);
  font-family: 'Signika Negative', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 16px;
}

/* Hero "lockup" title — Proline: 60px / 66px line-height */
.pr h1 {
  font-size: 60px;
  line-height: 66px;
  font-weight: 600;
}

/* Section title — Proline: 40px / 48px */
.pr h2 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
}

/* Sub-card title — Proline: 18px / 24px (mobile section title) */
.pr h5 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

/* Feature block title — Proline: 16px / 16px */
.pr h6 {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
}

.pr p {
  color: var(--background-font-colour);
  font-family: 'Signika Negative', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 12px;
}

.pr .container {
  max-width: 1180px;
  width: 92%;
  margin: 0 auto;
}

/* Pill — Proline pillContainer style: faint outline bg with rotating border,
 * gradient text, optional arrow chip on the right. 14px / 18px Inter. */
.pr .pr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(190, 167, 255, 0.06);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  margin-bottom: 18px;
  position: relative;
}

.pr .pr-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-button);
  box-shadow: 0 0 8px var(--primary-button);
}

/* Buttons — Proline buttonText: 14px / 20px Inter 500 */
.pr .pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.pr .pr-btn-arrow {
  transition: transform 0.18s ease-out;
}

.pr .pr-btn:hover .pr-btn-arrow {
  transform: translateX(3px);
}

.pr .pr-btn-text {
  display: inline-block;
}

.pr .pr-btn-primary {
  background: var(--primary-button);
  color: #ffffff;
}

.pr .pr-btn-primary:hover {
  filter: brightness(1.1);
  color: #ffffff;
}

.pr .pr-btn-ghost {
  background: var(--primary-background);
  color: var(--background-heading-colour);
  border: 1px solid var(--border-colour);
}

.pr .pr-btn-lg {
  padding: 12px 24px;
  font-size: 14px;
  line-height: 20px;
}

.pr .pr-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 16px;
}

/* Header — Proline keeps it fully transparent across all breakpoints */
.pr .pr-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 18px 0;
  background: transparent;
}

.pr .pr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pr .pr-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pr .pr-logo-mark {
  display: inline-flex;
  align-items: center;
}

/* Wordmark next to the logo — default visible (used by the footer) */
.pr .pr-logo-text {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--background-heading-colour);
  letter-spacing: -0.01em;
}

/* Proline header uses only the lightning-bolt glyph — wordmark hidden in
 * the header context. (Footer keeps its own brand text.) */
.pr .pr-header .pr-logo-text {
  display: none;
}

.pr .pr-nav ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr .pr-nav a {
  color: var(--nav-primary-font-colour);
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.15s ease;
}

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

.pr .pr-caret {
  margin-left: 4px;
  opacity: 0.6;
  vertical-align: -1px;
}

.pr .pr-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr .pr-mobile-trigger {
  color: var(--background-heading-colour);
}

/* Hero — Proline hero: padding 160px 0, lockup max-width 650px */
.pr .pr-hero {
  position: relative;
  padding: 120px 0 80px;
  text-align: center;
  overflow: hidden;
}

.pr .pr-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.pr .pr-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Veil the (dark) bg video with the page colour so it reads as a subtle
   * texture in BOTH themes — on the light theme an unveiled dark video
   * turns the whole hero muddy grey. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--background-colour) 45%, transparent) 0%,
    var(--background-colour) 90%
  );
  z-index: 1;
  pointer-events: none;
}

.pr .pr-hero-bignum {
  position: absolute;
  top: 60px;
  left: -40px;
  font-size: 260px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--background-font-colour) 14%, transparent);
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.pr .pr-hero-inner {
  position: relative;
  z-index: 2;
}

/* Hero lockup title — Proline lockupTitle: 60px / 66px, Mori/Sora 600 */
.pr .pr-hero-title {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 60px;
  line-height: 66px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 12px 0 20px;
}

/* Hero subtext — Proline lockupSubtext: 18px / 26px Inter */
.pr .pr-hero-sub {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: var(--background-font-colour);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* Hero screenshot — real dashboard PNG */
.pr .pr-hero-screenshot {
  margin: 60px auto 0;
  max-width: 1080px;
  position: relative;
}

.pr .pr-hero-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  /* The dashboard PNGs have transparent panels — back them with the dark
   * secondary surface or they ghost out on the light theme's white page. */
  background: var(--secondary-background);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(113, 50, 245, 0.18);
  border: 1px solid var(--border-colour);
}

/* Dashboard mock card (legacy JSX — kept for reference, replaced by screenshot above) */
.pr .pr-dashboard-card {
  margin-top: 60px;
  display: flex;
  gap: 1px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.pr .pr-dashboard-side {
  width: 200px;
  flex: 0 0 200px;
  background: var(--secondary-background);
  padding: 20px 0;
}

.pr .pr-dashboard-side-logo {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: 10px;
}

.pr .pr-dashboard-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-dashboard-side li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  color: var(--secondary-font-colour);
  cursor: pointer;
}

.pr .pr-dashboard-side li.active {
  color: var(--background-heading-colour);
  background: rgba(190, 167, 255, 0.06);
  border-left: 2px solid var(--primary-button);
  padding-left: 18px;
}

.pr .pr-dashboard-side li .ti {
  font-size: 18px;
  opacity: 0.75;
}

.pr .pr-dashboard-main {
  flex: 1 1 auto;
  padding: 20px 24px;
  background: var(--primary-background);
  min-width: 0;
}

.pr .pr-dashboard-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

.pr .pr-dashboard-label {
  font-size: 11px;
  color: var(--secondary-font-colour);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pr .pr-dashboard-balance {
  font-size: 24px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0;
}

.pr .pr-dashboard-actions-mini {
  display: flex;
  gap: 6px;
}

.pr .pr-mini-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-colour);
  background: transparent;
  color: var(--background-heading-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pr .pr-mini-icon .ti {
  font-size: 16px;
}

.pr .pr-dashboard-holdings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-dashboard-holdings li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
  font-size: 13px;
}

.pr .pr-dashboard-holdings li .pr-holdings-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pr .pr-dashboard-holdings li:last-child {
  border-bottom: 0;
}

.pr .pr-holdings-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-holdings-icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.pr .pr-holdings-name {
  color: var(--background-heading-colour);
  font-weight: 500;
}

.pr .pr-holdings-name em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--primary-font-colour);
}

.pr .pr-holdings-amount {
  color: var(--secondary-font-colour);
  font-weight: 500;
}

.pr .pr-holdings-change {
  font-weight: 600;
  font-size: 12px;
}

.pr .pr-holdings-change.positive,
.pr .positive {
  color: #01B28B;
}

.pr .pr-holdings-change.negative,
.pr .negative {
  color: #FF3344;
}

.pr .pr-dashboard-chart {
  margin-top: 12px;
  height: 60px;
}

.pr .pr-dashboard-chart svg {
  width: 100%;
  height: 100%;
}

.pr .pr-dashboard-stats {
  width: 260px;
  flex: 0 0 260px;
  padding: 20px;
  background: var(--secondary-background);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pr .pr-stats-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 14px;
}

.pr .pr-donut {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 6px auto 10px;
}

.pr .pr-donut svg {
  width: 100%;
  height: 100%;
}

.pr .pr-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-size: 18px;
}

.pr .pr-stats-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-stats-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--secondary-font-colour);
  padding: 4px 0;
}

.pr .pr-stats-legend li span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.pr .pr-stats-legend li em {
  margin-left: auto;
  font-style: normal;
  color: var(--background-heading-colour);
  font-weight: 600;
}

.pr .pr-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pr .pr-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(190, 167, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.pr .pr-progress-bar i {
  display: block;
  height: 100%;
  background: var(--primary-button);
}

.pr .pr-progress-row em {
  font-style: normal;
  font-weight: 600;
  color: var(--background-heading-colour);
  font-size: 12px;
}

.pr .pr-bars-mini {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
}

.pr .pr-bars-mini i {
  flex: 1;
  border-radius: 2px;
}

/* Why */
.pr .pr-why {
  padding: 40px 0 80px;
}

.pr .pr-why-item {
  padding: 24px 16px;
  text-align: left;
}

/* Proline why-item icon — no circular wrapper, just an accent-purple glyph */
.pr .pr-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-button);
  margin-bottom: 12px;
}

/* subFeatureBlockTitle — Mori/Sora 600 14px/18px */
.pr .pr-why-item h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0 0 8px;
}

/* subFeatureBlockDescription — Inter 14px/22px text-extra */
.pr .pr-why-item p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

/* Section heading — Proline lockup: centered column, max-width 650px */
.pr .pr-section-head {
  text-align: center;
  margin: 60px auto 40px;
  max-width: 650px;
}

.pr .pr-section-head .pr-pill {
  margin-bottom: 16px;
}

.pr .pr-section-head h2 {
  margin: 0 0 14px;
}

.pr .pr-section-head p {
  margin: 0;
}

/* Section head paragraph — Proline contentRightText: 16px / 24px Inter */
.pr .pr-section-head p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--background-font-colour);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* Features */
.pr .pr-features {
  padding: 60px 0;
}

/* Proline featureBlockWrapper: 44px padding for big cards, smaller for compact */
.pr .pr-feature-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 16px;
  padding: 32px;
  height: 100%;
}

.pr .pr-feature-card-lg {
  padding: 44px;
  min-height: 380px;
}

.pr .pr-feature-card-head {
  margin-bottom: 18px;
}

/* mainFeatureBlockTitle — Mori/Sora 600 16px */
.pr .pr-feature-card-head h5 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

/* mainFeatureBlockDesc — Inter 16px/24px text-tertiary */
.pr .pr-feature-card-head p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--primary-font-colour);
  margin: 0;
}

.pr .pr-markets-table {
  font-size: 13px;
}

.pr .pr-markets-th,
.pr .pr-markets-tr {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
}

.pr .pr-markets-th > span,
.pr .pr-markets-tr > span {
  flex: 1 1 0;
}

.pr .pr-markets-name {
  flex: 1.5 1 0 !important;
}

.pr .pr-markets-th {
  font-size: 11px;
  color: var(--primary-font-colour);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-markets-tr {
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-markets-tr:last-child {
  border-bottom: 0;
}

.pr .pr-markets-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--background-heading-colour);
  font-weight: 500;
}

.pr .pr-markets-name i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-markets-name i img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Always-dark product surfaces (they keep the dark secondary background in
 * BOTH themes): pin their hairlines to a translucent lavender, because
 * --border-colour flips to a pale tint in light mode and would glare
 * against these dark panels. */
.pr .pr-hero-screenshot img,
.pr .pr-copy-card,
.pr .pr-speed-card,
.pr .pr-leverage-card,
.pr .pr-cardmock-inner {
  --border-colour: rgba(190, 167, 255, 0.16);
}

.pr .pr-copy-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
}

.pr .pr-copy-trader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-copy-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050024;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  background: #FFB266;
}

.pr .pr-copy-avatar-img {
  background: transparent;
}

.pr .pr-copy-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pr .pr-copy-trader > div {
  flex: 1;
}

/* traderName — 14px/20px */
.pr .pr-copy-trader strong {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-heading-colour);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  display: block;
}

/* traderUsername — 12px/12px text-extra */
.pr .pr-copy-trader em {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-font-colour);
  font-style: normal;
  font-size: 12px;
  line-height: 12px;
}

.pr .pr-copy-stats {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-copy-stats > div {
  flex: 1 1 0;
}

.pr .pr-copy-stats:last-child {
  border-bottom: 0;
}

/* copyTradingInfoRow value — 12px/12px */
.pr .pr-copy-stats > div strong {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-heading-colour);
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}

.pr .pr-copy-stats > div span {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-font-colour);
  font-size: 12px;
  line-height: 12px;
  margin-top: 4px;
}

/* Small features row */
.pr .pr-small-features {
  margin-top: 36px;
}

/* Small feature block — icon now lives inside the h6 so it sits inline
 * with the title naturally. The p body sits underneath. Desktop is
 * left-aligned, mobile flips to centered (rule in @media at the bottom). */
.pr .pr-small-feature {
  padding: 18px 12px;
}

.pr .pr-small-feature h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--background-heading-colour);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr .pr-small-feature p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

.pr .pr-small-feature-vert {
  flex-direction: column;
  text-align: left;
}

/* Small-feature icon — accent-purple glyph, no circle */
.pr .pr-small-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-button);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Card section */
.pr .pr-card-section {
  padding: 80px 0;
  text-align: center;
}

/* Crypto card section feature blocks — Proline subFeatureBlock pattern:
 * horizontal icon-left-of-title, body underneath, dashed vertical divider
 * between each column. */
.pr .pr-card-features {
  margin-top: 24px !important;
}

.pr .pr-card-feature-col {
  position: relative;
}

.pr .pr-card-feature-col.pr-card-feature-divider::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 0;
  border-left: 1px dashed var(--border-colour);
}

.pr .pr-card-feature {
  padding: 16px 22px;
  text-align: left;
}

.pr .pr-card-feature-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pr .pr-card-feature-icon {
  font-size: 18px !important;
  color: var(--primary-button);
  flex-shrink: 0;
}

.pr .pr-card-feature h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0;
}

.pr .pr-card-feature p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

/* Slim Proline-style card mock — Proline mobile dimensions ~320×170 */
.pr .pr-cardmock {
  margin: 0 auto 40px;
  width: 320px;
  max-width: 90%;
}

.pr .pr-cardmock-inner {
  /* Opaque dark gradient (was translucent) — over the light theme's white
   * page the see-through version turned murky grey. */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary-background) 70%, var(--background-colour)) 0%,
    var(--secondary-background) 100%
  );
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  position: relative;
  height: 180px;
}

.pr .pr-cardmock-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pr .pr-cardmock-visa {
  color: var(--secondary-heading-colour);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.06em;
  font-size: 18px;
}

.pr .pr-cardmock-chip {
  display: none;
}

.pr .pr-cardmock-num {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: var(--secondary-font-colour);
  letter-spacing: 0.18em;
  font-weight: 500;
  font-size: 15px;
}

/* Tools */
.pr .pr-tools {
  padding: 80px 0;
  position: relative;
}

/* Subtle gradient hairline divider between major sections — Proline pattern */
.pr .pr-tools::before,
.pr .pr-card-section::before,
.pr .pr-features::before,
.pr .pr-reviews::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1080px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-colour) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Tools brand orbs — 5 round chips, center one highlighted with purple glow ring */
.pr .pr-tools-orbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.pr .pr-tools-orb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
}

.pr .pr-tools-orb img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.pr .pr-tools-orb.active {
  width: 44px;
  height: 44px;
  opacity: 1;
  border-color: var(--primary-button);
  box-shadow: 0 0 0 6px rgba(113, 50, 245, 0.12), 0 0 24px rgba(113, 50, 245, 0.45);
  transform: scale(1);
  position: relative;
}

/* Proline orbShadow SVG behind the active orb */
.pr .pr-tools-orb-shadow {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.6;
  filter: blur(8px);
  pointer-events: none;
}

/* "Built for speed" card — Proline digital/dot-matrix style display */
.pr .pr-speed-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  position: relative;
}

.pr .pr-speed-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 70px;
}

.pr .pr-speed-bars i {
  flex: 1;
  border-radius: 1px;
  opacity: 0.85;
}

.pr .pr-speed-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: 'Signika Negative', monospace;
  color: var(--secondary-font-colour);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-colour);
}

.pr .pr-speed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
  border-bottom: 1px dashed var(--border-colour);
  margin-bottom: 10px;
}

.pr .pr-speed-digital {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #46DFA5;
  font-family: 'Courier New', monospace;
  font-feature-settings: 'tnum';
  text-shadow: 0 0 12px rgba(70, 223, 165, 0.4);
}

.pr .pr-speed-digital strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pr .pr-speed-digital em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.15em;
}

.pr .pr-speed-stats {
  display: inline-flex;
  gap: 24px;
}

.pr .pr-speed-stats > span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.pr .pr-speed-stats em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--secondary-font-colour);
}

.pr .pr-speed-stats strong {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: var(--secondary-heading-colour);
  font-weight: 700;
}

.pr .pr-speed-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--secondary-font-colour);
  text-transform: uppercase;
}

.pr .pr-speed-bottom em {
  color: #46DFA5;
  font-style: normal;
  font-weight: 700;
  margin-right: 4px;
}

.pr .pr-speed-strength {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.pr .pr-speed-strength i {
  width: 10px;
  height: 8px;
  border: 1px solid var(--border-colour);
  border-radius: 1px;
  display: inline-block;
}

.pr .pr-speed-strength i.on {
  background: #46DFA5;
  border-color: #46DFA5;
}

.pr .pr-leverage-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
}

.pr .pr-leverage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--secondary-font-colour);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-colour);
  margin-bottom: 12px;
}

.pr .pr-leverage-head em {
  color: var(--secondary-heading-colour);
  font-style: normal;
  font-weight: 600;
}

.pr .pr-leverage-amount {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.pr .pr-leverage-stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-leverage-stats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
}

.pr .pr-leverage-stats li span {
  color: var(--secondary-font-colour);
}

.pr .pr-leverage-stats li em {
  color: var(--secondary-heading-colour);
  font-style: normal;
  font-weight: 500;
  font-family: 'Signika Negative', monospace;
}

.pr .pr-leverage-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 14px;
  border-top: 1px dashed var(--border-colour);
  font-size: 12px;
  color: var(--secondary-font-colour);
}

.pr .pr-toggle {
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--primary-button);
  position: relative;
  flex-shrink: 0;
}

.pr .pr-toggle i {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}

.pr .pr-leverage-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: 14px;
  color: var(--secondary-heading-colour);
  font-weight: 500;
}

.pr .pr-leverage-symbol em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
}

.pr .pr-leverage-slider {
  position: relative;
  height: 6px;
  background: rgba(190, 167, 255, 0.12);
  border-radius: 999px;
  margin: 18px 0 18px;
}

.pr .pr-leverage-slider i {
  display: block;
  height: 100%;
  background: var(--primary-button);
  border-radius: 999px;
}

.pr .pr-leverage-slider b {
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  background: var(--primary-button);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}

.pr .pr-leverage-marks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--secondary-font-colour);
}

.pr .pr-leverage-marks .active {
  color: var(--secondary-heading-colour);
  font-weight: 600;
}

/* Reviews */
.pr .pr-reviews {
  padding: 60px 0 100px;
}

.pr .pr-review-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  padding: 22px;
  height: 100%;
}

.pr .pr-review-text {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--primary-font-colour);
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 22px;
}

.pr .pr-review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr .pr-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050024;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-review-avatar-img {
  background: transparent;
}

.pr .pr-review-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pr .pr-review-author strong {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--background-heading-colour);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.pr .pr-review-author em {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--primary-font-colour);
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
}

/* Footer */
.pr .pr-footer {
  padding: 60px 0 30px;
  border-top: 1px solid var(--border-colour);
  background: var(--background-colour);
}

.pr .pr-footer-main {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-footer-brand {
  padding-right: 24px;
}

/* footerLinkHeader — Inter 500 13px/20px */
.pr .pr-footer-col h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--background-heading-colour);
  margin-bottom: 12px;
}

.pr .pr-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-footer-col li {
  margin-bottom: 8px;
}

/* footerLinksItem — Inter 13px/20px */
.pr .pr-footer-col a {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--background-font-colour);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
}

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

.pr .pr-footer-bottom {
  padding: 24px 0;
  align-items: center;
  font-size: 12px;
  color: var(--primary-font-colour);
}

.pr .pr-footer-socials {
  display: flex;
  gap: 14px;
}

.pr .pr-footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--background-font-colour);
  text-decoration: none;
}

.pr .pr-footer-socials a:hover {
  color: var(--background-heading-colour);
}

.pr .pr-footer-socials .ti {
  font-size: 16px;
}

.pr .pr-footer-legal-links a {
  color: var(--background-font-colour);
  text-decoration: none;
  margin-left: 14px;
}

.pr .pr-footer-disclaimer {
  padding-top: 16px;
}

/* disclaimerText — 13px/20px text-tertiary */
.pr .pr-footer-disclaimer p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--primary-font-colour);
}

/* Mobile / tablet — single block. Proline mobile sizes:
 *  - lockupTitle: 32px / 40px
 *  - section titles: 28px / 40px
 *  - lockupSubtext: 16px / 24px
 *  - feature desc: 14px / 24px
 */
@media (max-width: 992px) {
  .pr h1 {
    font-size: 32px;
    line-height: 40px;
  }
  .pr h2 {
    font-size: 28px;
    line-height: 40px;
  }
  .pr .pr-hero {
    padding: 40px 0;
  }
  .pr .pr-hero-title {
    font-size: 32px;
    line-height: 40px;
  }
  .pr .pr-hero-sub {
    font-size: 16px;
    line-height: 24px;
  }
  .pr .pr-hero-bignum {
    font-size: 140px;
    top: 80px;
    left: -20px;
  }
  .pr .pr-hero-screenshot {
    margin-top: 36px;
  }
  .pr .pr-feature-card-head p {
    font-size: 14px;
    line-height: 24px;
  }
  .pr .pr-dashboard-card {
    flex-direction: column;
  }
  .pr .pr-dashboard-side,
  .pr .pr-dashboard-stats {
    width: 100%;
    flex: none;
  }
  .pr .pr-dashboard-side ul {
    display: flex;
    overflow-x: auto;
  }
  .pr .pr-dashboard-side li {
    white-space: nowrap;
  }
  .pr .pr-dashboard-side li.active {
    border-left: 0;
    border-bottom: 2px solid var(--primary-button);
    padding-left: 20px;
  }
  .pr .pr-section-head {
    margin: 48px auto 28px;
  }
  /* More generous vertical breathing room on mobile so sections don't run
   * into each other (Proline mobile uses ~80px section padding). */
  .pr .pr-card-section,
  .pr .pr-tools,
  .pr .pr-features,
  .pr .pr-reviews {
    padding: 64px 0;
  }
  /* Big feature cards on mobile — Proline lets the heading + description
   * sit directly on the page background (no card chrome). Only the inner
   * table / copy-card retains its own contained styling. */
  .pr .pr-feature-card,
  .pr .pr-feature-card-lg {
    background: transparent;
    border: 0;
    padding: 8px 0;
    min-height: auto;
  }
  /* Kill the rotating dashed SVG border on mobile too — Proline shows none */
  .pr .pr-feature-card .pr-rotating-border,
  .pr .pr-feature-card-lg .pr-rotating-border {
    display: none;
  }
  /* Inner markets/copy/leverage panels: keep their own dark container on
   * mobile so they read as contained widgets sitting under each
   * description (Proline pattern). */
  .pr .pr-markets-table,
  .pr .pr-copy-card,
  .pr .pr-speed-card,
  .pr .pr-leverage-card {
    margin-top: 18px;
    background: var(--secondary-background);
    border: 1px solid var(--border-colour);
    border-radius: 12px;
    padding: 14px 16px;
  }
  /* The markets-table already had its own internal styling; just keep its
   * row dividers inside the new wrapper */
  .pr .pr-markets-table .pr-markets-th {
    padding-top: 4px;
  }
  /* On mobile the markets table moves onto the dark secondary surface in
   * BOTH themes — switch its text and hairlines to the secondary tokens. */
  .pr .pr-markets-table {
    --border-colour: rgba(190, 167, 255, 0.16);
  }
  .pr .pr-markets-table .pr-markets-th,
  .pr .pr-markets-table .pr-markets-tr {
    color: var(--secondary-font-colour);
  }
  .pr .pr-markets-table .pr-markets-name {
    color: var(--secondary-heading-colour);
  }
  /* Small features (Multi-account, Global market access, Fast deposits) —
   * Proline mobile: no card / background, centered, icon inline with the
   * title on a single row, description centered below. Dashed horizontal
   * divider between blocks. */
  .pr .pr-small-features {
    margin-top: 12px;
  }
  .pr .pr-small-features .col {
    margin-bottom: 0;
  }
  .pr .pr-small-feature {
    padding: 22px 0;
    border-bottom: 1px dashed var(--border-colour);
    text-align: center;
  }
  .pr .pr-small-features .col:last-child .pr-small-feature {
    border-bottom: 0;
  }
  .pr .pr-small-feature h6 {
    justify-content: center;
  }
  .pr .pr-small-feature p {
    max-width: 320px;
    margin: 0 auto;
  }
  /* Tools orbs — make them larger on mobile so the row reads clearly */
  .pr .pr-tools-orb {
    width: 38px;
    height: 38px;
  }
  .pr .pr-tools-orb.active {
    width: 56px;
    height: 56px;
  }
  .pr .pr-tools-orbs {
    gap: 16px;
    margin-bottom: 32px;
  }
  /* Crypto-card features: vertical divider becomes a horizontal one
   * between stacked cards on mobile. Centered icon-title-text block. */
  .pr .pr-card-feature-col.pr-card-feature-divider::before {
    top: 0;
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    height: 0;
    border-left: 0;
    border-top: 1px dashed var(--border-colour);
  }
  .pr .pr-card-feature {
    text-align: center;
    padding: 22px 18px;
  }
  .pr .pr-card-feature-head {
    justify-content: center;
  }
  .pr .pr-card-feature p {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .pr .pr-footer-bottom {
    text-align: left;
  }
  .pr .pr-footer-legal-links {
    margin-top: 12px;
    text-align: left !important;
  }
  .pr .pr-footer-legal-links a {
    margin-left: 0;
    margin-right: 14px;
  }

  /* Mobile header — slightly tighter vertical padding. Already transparent
   * via the global rule. Wordmark hidden globally. */
  .pr .pr-header {
    padding: 14px 0;
  }

  /* Mobile hero screenshot — Proline uses a tall portrait image edge-to-edge
   * with no card border or shadow, gently blended into the page bg */
  .pr .pr-hero-screenshot {
    max-width: 100%;
    margin-top: 28px;
  }
  .pr .pr-hero-screenshot img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pr .pr-hero-screenshot-mobile {
    max-width: 360px;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }

  /* Mobile-only "All the features you need for profits" lockup, sits above
   * the stacked feature list. Centered, generous bottom margin. */
  .pr .pr-why-mobile-headline {
    text-align: center;
    margin: 24px auto 32px;
    max-width: 420px;
    font-family: 'Signika Negative', system-ui, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--background-heading-colour);
  }

  /* Centered, divider-separated feature items (Proline mobile layout).
   * Title sits inline with its icon, body underneath. */
  .pr .pr-why-item {
    padding: 24px 0;
    border-bottom: 1px dashed var(--border-colour);
    text-align: center;
  }

  .pr .pr-why-item:last-child {
    border-bottom: 0;
  }

  .pr .pr-why-item h6 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
  }

  .pr .pr-why-icon {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .pr .pr-why-item p {
    margin: 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   PLANS (guest) — pr's pricing cards
   Scoped under .pr, the guest shell's root class, so these never
   reach the dashboard. Dormant while NODE_GUEST=ap.
   ============================================================ */

.pr .pr-plans{
  padding-top: 24px;
  padding-bottom: 48px;
}

.pr .pr-plans-head{
  margin: 32px 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.pr .pr-plan-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pr .pr-plan{
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 12px;
  background: var(--primary-background);
}

.pr .pr-plan-title{
  padding-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--primary-link-colour);
}

/* Label left, value right, hairline between. The last row drops its rule so
   the stack ends on the action rather than on a line. */
.pr .pr-plan-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-plan-row.last{
  border-bottom: 0;
}

.pr .pr-plan-label{
  color: var(--primary-font-colour);
}

/* ROI is the number people compare plans on, so it is the one figure that
   carries the profit colour rather than body text. The literal is the profit
   green the dashboard used to hand over as --db8-buy; that var was only ever
   set inline on .db8-shell, so a guest page always rendered this fallback.
   Inlined when the DB8 dashboard moved to skins/tr1. */
.pr .pr-plan-accent{
  font-weight: 600;
  color: #01b28b;
}

.pr .pr-plan-field{
  display: block;
  padding: 12px 0;
}

.pr .pr-plan-field select{
  display: block;
  height: 38px;
  width: 100%;
  margin-top: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  font-weight: 600;
}

/* Standalone, not Materialize's .btn — that is a fixed 36px uppercase pill and
   this needs to be a full-width 42px block in sentence case. */
.pr .pr-plan-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 100%;
  margin-top: auto;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  background: var(--primary-button);
  color: #ffffff;
}

.pr .pr-plan-btn:hover{
  filter: brightness(1.08);
}

@media only screen and (max-width: 992px){
  .pr .pr-plan-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}
@font-face {
  font-family: 'Madera';
  src:
    url(/assets/fonts/Madera-Light.woff2) format('woff2'),
    url(/assets/fonts/Madera-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Madera';
  src:
    url(/assets/fonts/Madera-Regular.woff2) format('woff2'),
    url(/assets/fonts/Madera-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Madera';
  src:
    url(/assets/fonts/Madera-Medium.woff2) format('woff2'),
    url(/assets/fonts/Madera-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Madera';
  src:
    url(/assets/fonts/Madera-Bold.woff2) format('woff2'),
    url(/assets/fonts/Madera-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: 'Madera';
}
/* ── Tusker Grotesk — tr1's shipped display font (drawer links + page heros) ── */
@font-face {
  font-family: 'Tusker Grotesk';
  src:
    url(/assets/fonts/TuskerGrotesk-3500Medium.woff2) format('woff2'),
    url(/assets/fonts/TuskerGrotesk-3500Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Tusker Grotesk';
  src:
    url(/assets/fonts/TuskerGrotesk-4700Bold.woff2) format('woff2'),
    url(/assets/fonts/TuskerGrotesk-4700Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}

/* ============================================================
   DASHBOARD (user area) — the tr1u workspace
   Swapped in from skins/tr1: this skin's (user) folder and the
   rules that style it were exchanged with tr1's. The markup is
   at skins/pr/(user)/, so a skin still owns exactly one
   stylesheet (ai-rules.md).

   The @font-face blocks above are DUPLICATED from tr1/skin.css
   rather than moved — tr1's guest chrome still uses Madera and
   Tusker Grotesk. Their url()s resolve against THIS file, so
   the faces they name were copied to skins/pr/_fonts/.
   ============================================================ */
/* ============================================================
   tr1 user workspace
   ============================================================ */

.tr1u-shell {
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
}

.tr1u-header {
  position: sticky;
  top: 0;
  z-index: 110;
  border-bottom: 1px solid rgba(165, 189, 217, 0.16);
  background: rgba(1, 1, 33, 0.96);
  box-shadow: 0 10px 30px rgba(1, 1, 33, 0.14);
}

.tr1u-header-inner,
.tr1u-main,
.tr1u-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.tr1u-header-inner {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.tr1u-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tr1u-brand:hover,
.tr1u-brand:focus {
  color: #ffffff;
}

.tr1u-brand-mark {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22c55e;
  color: #010121;
  font-size: 20px;
  line-height: 1;
}

.tr1u-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 auto;
}

.tr1u-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #a5bdd9;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.tr1u-nav-link .ti {
  font-size: 17px;
}

.tr1u-nav-link:hover,
.tr1u-nav-link.is-active {
  background: rgba(34, 197, 94, 0.14);
  color: #ffffff;
}

.tr1u-nav-link.is-active .ti {
  color: #22c55e;
}

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

.tr1u-icon-button,
.tr1u-avatar {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(165, 189, 217, 0.28);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tr1u-icon-button:hover,
.tr1u-avatar:hover {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.tr1u-icon-button .ti {
  font-size: 18px;
}

.tr1u-avatar {
  overflow: hidden;
  border-color: #22c55e;
  background: #22c55e;
  color: #010121;
  font-size: 12px;
  font-weight: 700;
}

.tr1u-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tr1u-main {
  min-height: calc(100vh - 130px);
  padding: 34px 0 48px;
}

.tr1u-page-heading {
  margin-bottom: 24px;
}

.tr1u-page-heading p,
.tr1u-panel-heading p,
.tr1u-metric p {
  margin: 0;
  color: var(--primary-font-colour);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tr1u-page-heading h1 {
  margin: 6px 0 0;
  color: var(--background-heading-colour);
  font-family: 'Tusker Grotesk', 'Madera', sans-serif;
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tr1u-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 22px;
  color: var(--primary-font-colour);
  font-size: 13px;
}

.tr1u-breadcrumb a {
  color: #22a958;
}

.tr1u-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  border-top: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  font-size: 12px;
}

.tr1u-footer a {
  color: inherit;
  text-decoration: underline;
}

.tr1u-footer-signal {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.tr1u-dashboard {
  display: grid;
  gap: 22px;
}

.tr1u-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 24px;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 14px;
  background: #010121;
  color: #ffffff;
}

.tr1u-hero-card::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -70px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16), transparent 68%);
  pointer-events: none;
}

.tr1u-hero-copy,
.tr1u-value-block {
  position: relative;
  z-index: 1;
}

.tr1u-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #a5bdd9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tr1u-eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.tr1u-hero-card h1 {
  max-width: 570px;
  margin: 0;
  font-family: 'Tusker Grotesk', 'Madera', sans-serif;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.96;
  text-transform: uppercase;
}

.tr1u-hero-description {
  max-width: 460px;
  margin: 16px 0 0;
  color: #a5bdd9;
  font-size: 15px;
}

.tr1u-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.tr1u-primary-action,
.tr1u-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #22c55e;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: filter 0.15s ease, background 0.15s ease;
}

.tr1u-primary-action {
  background: #22c55e;
  color: #010121;
}

.tr1u-primary-action:hover {
  color: #010121;
  filter: brightness(1.08);
}

.tr1u-primary-action .ti {
  font-size: 17px;
}

.tr1u-secondary-action {
  color: #ffffff;
}

.tr1u-secondary-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.tr1u-value-block {
  align-self: end;
  min-height: 178px;
  padding: 18px 0 8px 26px;
  border-left: 1px solid rgba(165, 189, 217, 0.22);
}

.tr1u-value-block > span,
.tr1u-value-block small {
  display: block;
  color: #a5bdd9;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tr1u-value-block strong {
  display: block;
  margin: 7px 0;
  color: #ffffff;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1;
}

.tr1u-value-chart {
  display: block;
  width: 100%;
  height: 76px;
  margin-top: 10px;
  overflow: visible;
}

.tr1u-value-chart path {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tr1u-value-chart .tr1u-value-chart-ghost {
  stroke: rgba(34, 197, 94, 0.2);
}

.tr1u-value-chart circle {
  fill: #22c55e;
}

.tr1u-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tr1u-metric,
.tr1u-panel {
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--primary-background);
}

.tr1u-metric {
  min-height: 142px;
  padding: 20px;
}

.tr1u-metric strong {
  display: block;
  margin: 15px 0 7px;
  color: var(--background-heading-colour);
  font-size: 22px;
  line-height: 1;
}

.tr1u-metric small {
  color: var(--primary-font-colour);
  font-size: 12px;
}

.tr1u-metric .is-positive,
.tr1u-market-price .is-positive {
  color: #159947;
}

.tr1u-metric .is-negative,
.tr1u-market-price .is-negative {
  color: #dc3d4e;
}

.tr1u-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
  gap: 18px;
}

.tr1u-panel {
  padding: 22px;
}

.tr1u-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.tr1u-panel-heading h2 {
  margin: 5px 0 0;
  color: var(--background-heading-colour);
  font-size: 22px;
  line-height: 1;
}

.tr1u-panel-heading a,
.tr1u-empty a {
  color: #159947;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.tr1u-market-list,
.tr1u-trade-list {
  display: grid;
}

.tr1u-market-row,
.tr1u-trade-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 0;
  border-top: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
}

.tr1u-market-row:hover,
.tr1u-trade-row:hover {
  color: var(--background-heading-colour);
}

.tr1u-market-row img,
.tr1u-market-monogram {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
}

.tr1u-market-row img {
  object-fit: cover;
}

.tr1u-market-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.14);
  color: #159947;
  font-size: 13px;
  font-weight: 700;
}

.tr1u-market-name,
.tr1u-trade-row > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.tr1u-market-name b,
.tr1u-market-name small,
.tr1u-trade-row b,
.tr1u-trade-row small,
.tr1u-market-price b,
.tr1u-market-price small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr1u-market-name b,
.tr1u-trade-row b,
.tr1u-market-price b {
  color: var(--background-heading-colour);
  font-size: 13px;
}

.tr1u-market-name small,
.tr1u-trade-row small,
.tr1u-market-price small {
  margin-top: 3px;
  color: var(--primary-font-colour);
  font-size: 11px;
}

.tr1u-market-price {
  min-width: 92px;
  text-align: right;
}

.tr1u-trade-side {
  min-width: 49px;
  padding: 5px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.13);
  color: #159947;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.tr1u-trade-side.sell,
.tr1u-trade-side.lower,
.tr1u-trade-side.put {
  background: rgba(220, 61, 78, 0.12);
  color: #dc3d4e;
}

.tr1u-trade-row > .ti {
  flex: 0 0 auto;
  color: var(--primary-font-colour);
  font-size: 17px;
}

.tr1u-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 29px 0 9px;
  border-top: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  font-size: 13px;
}

.tr1u-empty p {
  margin: 0;
}

@media (max-width: 992px) {
  .tr1u-header-inner,
  .tr1u-main,
  .tr1u-footer {
    width: min(100% - 28px, 760px);
  }

  .tr1u-header-inner {
    min-height: 62px;
    gap: 14px;
  }

  .tr1u-nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    margin: -2px 0 10px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .tr1u-nav::-webkit-scrollbar {
    display: none;
  }

  .tr1u-header-inner {
    flex-wrap: wrap;
  }

  .tr1u-tools {
    gap: 5px;
  }

  .tr1u-icon-button {
    width: 31px;
    height: 31px;
  }

  .tr1u-icon-button .ti {
    font-size: 17px;
  }

  .tr1u-main {
    padding: 22px 0 36px;
  }

  .tr1u-hero-card,
  .tr1u-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .tr1u-hero-card {
    gap: 14px;
    padding: 24px;
  }

  .tr1u-value-block {
    min-height: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(165, 189, 217, 0.22);
    border-left: 0;
  }

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

@media (max-width: 520px) {
  .tr1u-header-inner,
  .tr1u-main,
  .tr1u-footer {
    width: min(100% - 24px, 520px);
  }

  .tr1u-brand {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tr1u-tools .tr1u-icon-button:nth-child(2) {
    display: none;
  }

  .tr1u-nav-link {
    padding: 7px 9px;
    font-size: 12px;
  }

  .tr1u-nav-link .ti {
    display: none;
  }

  .tr1u-hero-card {
    padding: 22px 18px;
  }

  .tr1u-hero-card h1 {
    font-size: 39px;
  }

  .tr1u-metric {
    min-height: 128px;
    padding: 16px;
  }

  .tr1u-metric strong {
    font-size: 18px;
  }

  .tr1u-panel {
    padding: 18px;
  }

  .tr1u-footer {
    flex-wrap: wrap;
    padding: 14px 0;
  }
}

/* ── tr1 command deck — a visual reset for the user workspace ──────────── */

.tr1u-shell {
  background-color: #edf3f1;
  background-image:
    radial-gradient(circle at 84% 0%, rgba(34, 197, 94, 0.16), transparent 25rem),
    linear-gradient(rgba(1, 1, 33, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 1, 33, 0.035) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

.tr1u-header {
  border-bottom: 0;
  background: #010121;
  box-shadow: none;
}

.tr1u-header::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, #22c55e 0 12%, rgba(34, 197, 94, 0.22) 12% 100%);
}

.tr1u-header-inner {
  gap: 22px;
}

.tr1u-brand {
  font-family: 'Tusker Grotesk', 'Madera', sans-serif;
  font-size: 21px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tr1u-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px 15px 7px 15px;
  font-family: 'Madera', sans-serif;
  font-size: 23px;
  font-weight: 700;
  transform: rotate(-4deg);
}

.tr1u-nav {
  width: max-content;
  flex: 0 1 auto;
  gap: 1px;
  margin: 0 auto;
  padding: 4px;
  border: 1px solid rgba(165, 189, 217, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.tr1u-nav-link {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.tr1u-nav-link.is-active {
  background: #22c55e;
  color: #010121;
}

.tr1u-nav-link.is-active .ti {
  color: #010121;
}

.tr1u-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.tr1u-tools {
  margin-left: 0;
}

.tr1u-icon-button,
.tr1u-avatar {
  border-color: rgba(165, 189, 217, 0.22);
}

.tr1u-main {
  padding-top: 48px;
}

.tr1u-footer {
  border-top: 1px dashed rgba(1, 1, 33, 0.2);
}

.tr1u-hero-card {
  min-height: 374px;
  grid-template-columns: minmax(0, 1.1fr) minmax(315px, 0.9fr);
  gap: 16px;
  padding: 44px;
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.09), transparent 32%),
    #010121;
  box-shadow: 0 28px 65px rgba(1, 1, 33, 0.25);
}

.tr1u-hero-card::before {
  top: -235px;
  right: -135px;
  width: 610px;
  height: 610px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.22), transparent 66%);
}

.tr1u-hero-card::after {
  content: 'TORO // COMMAND DECK';
  position: absolute;
  right: 28px;
  bottom: 22px;
  color: rgba(165, 189, 217, 0.38);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.19em;
}

.tr1u-eyebrow {
  color: #d6e6dc;
}

.tr1u-hero-card h1 {
  max-width: 500px;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.87;
}

.tr1u-hero-description {
  max-width: 365px;
}

.tr1u-primary-action,
.tr1u-secondary-action {
  min-height: 46px;
  border-radius: 999px;
  padding: 0 20px;
}

.tr1u-secondary-action {
  border-color: rgba(165, 189, 217, 0.46);
}

.tr1u-orbit {
  position: relative;
  display: grid;
  min-height: 290px;
  place-items: center;
  overflow: hidden;
}

.tr1u-orbit > svg {
  position: absolute;
  width: min(100%, 340px);
  height: auto;
  overflow: visible;
  animation: tr1u-orbit-turn 36s linear infinite;
}

.tr1u-orbit-ring {
  fill: none;
  stroke: rgba(165, 189, 217, 0.2);
  stroke-width: 1;
}

.tr1u-orbit-ring-outer {
  stroke-dasharray: 3 7;
}

.tr1u-orbit-ring-middle {
  stroke: rgba(34, 197, 94, 0.4);
  stroke-dasharray: 74 22;
}

.tr1u-orbit-ring-inner {
  stroke: rgba(165, 189, 217, 0.28);
  stroke-dasharray: 2 9;
}

.tr1u-orbit-spark {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: tr1u-orbit-draw 2.5s ease-out both;
}

.tr1u-orbit-marker {
  fill: #22c55e;
  stroke: rgba(34, 197, 94, 0.28);
  stroke-width: 12;
}

.tr1u-orbit-core {
  position: relative;
  z-index: 1;
  width: 174px;
  height: 174px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid rgba(34, 197, 94, 0.52);
  border-radius: 50%;
  background: rgba(1, 1, 33, 0.91);
  box-shadow: 0 0 0 12px rgba(1, 1, 33, 0.35), 0 0 50px rgba(34, 197, 94, 0.13);
  text-align: center;
}

.tr1u-orbit-core span,
.tr1u-orbit-core small {
  color: #a5bdd9;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tr1u-orbit-core strong {
  display: block;
  max-width: 100%;
  margin: 8px 0 6px;
  overflow: hidden;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr1u-orbit-tag {
  position: absolute;
  right: 2px;
  bottom: 29px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(34, 197, 94, 0.34);
  border-radius: 999px;
  background: rgba(1, 1, 33, 0.88);
  color: #d6e6dc;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes tr1u-orbit-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes tr1u-orbit-draw {
  from {
    stroke-dasharray: 0 600;
  }

  to {
    stroke-dasharray: 600 0;
  }
}

.tr1u-metric-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(1, 1, 33, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(1, 1, 33, 0.06);
}

.tr1u-metric {
  min-height: 154px;
  border: 0;
  border-right: 1px solid rgba(1, 1, 33, 0.1);
  border-radius: 0;
  background: transparent;
}

.tr1u-metric:last-child {
  border-right: 0;
}

.tr1u-metric::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 16px;
  background: #22c55e;
}

.tr1u-metric strong {
  margin-top: 0;
  font-family: 'Tusker Grotesk', 'Madera', sans-serif;
  font-size: 28px;
  letter-spacing: 0.02em;
}

.tr1u-dashboard-grid {
  gap: 22px;
}

.tr1u-panel {
  overflow: hidden;
  padding: 27px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 13px 30px rgba(1, 1, 33, 0.07);
}

.tr1u-trades-panel {
  background: #0c1535;
}

.tr1u-trades-panel .tr1u-panel-heading p,
.tr1u-trades-panel .tr1u-trade-row,
.tr1u-trades-panel .tr1u-trade-row b,
.tr1u-trades-panel .tr1u-trade-row small,
.tr1u-trades-panel .tr1u-trade-row > .ti,
.tr1u-trades-panel .tr1u-empty {
  color: #a5bdd9;
}

.tr1u-trades-panel .tr1u-panel-heading h2 {
  color: #ffffff;
}

.tr1u-trades-panel .tr1u-trade-row {
  border-top-color: rgba(165, 189, 217, 0.14);
}

.tr1u-panel-heading {
  margin-bottom: 19px;
}

.tr1u-market-row,
.tr1u-trade-row {
  transition: transform 0.16s ease, padding 0.16s ease;
}

.tr1u-market-row:hover,
.tr1u-trade-row:hover {
  transform: translateX(5px);
}

@media (max-width: 992px) {
  .tr1u-nav {
    width: auto;
    margin: -2px 0 10px;
  }

  .tr1u-hero-card {
    min-height: 0;
    padding: 32px;
  }

  .tr1u-orbit {
    min-height: 270px;
  }

  .tr1u-metric-grid {
    gap: 0;
  }

  .tr1u-metric:nth-child(2) {
    border-right: 0;
  }

  .tr1u-metric:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(1, 1, 33, 0.1);
  }
}

@media (max-width: 520px) {
  .tr1u-shell {
    background-size: auto, 22px 22px, 22px 22px;
  }

  .tr1u-header::after {
    background: linear-gradient(90deg, #22c55e 0 24%, rgba(34, 197, 94, 0.22) 24% 100%);
  }

  .tr1u-brand {
    font-size: 18px;
  }

  .tr1u-hero-card {
    padding: 27px 20px;
    border-radius: 21px;
  }

  .tr1u-hero-card h1 {
    font-size: 47px;
  }

  .tr1u-orbit {
    min-height: 245px;
  }

  .tr1u-orbit-core {
    width: 152px;
    height: 152px;
  }

  .tr1u-orbit-core strong {
    font-size: 19px;
  }

  .tr1u-orbit-tag {
    right: 0;
    bottom: 16px;
  }

  .tr1u-metric-grid {
    border-radius: 14px;
  }

  .tr1u-metric {
    min-height: 137px;
  }

  .tr1u-panel {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr1u-orbit > svg,
  .tr1u-orbit-spark {
    animation: none;
  }
}

/* ── tr1 portfolio app — based on the supplied mobile product direction ─── */

.tr1u-shell {
  min-height: 100dvh;
  background: #f8f8fc;
  color: #171621;
}

.tr1u-header {
  position: relative;
  border-bottom: 1px solid #ebeaf2;
  background: #ffffff;
  box-shadow: none;
}

.tr1u-header::after {
  display: none;
}

.tr1u-header-inner,
.tr1u-main,
.tr1u-footer {
  width: min(100%, 980px);
}

.tr1u-header-inner {
  min-height: 68px;
  padding: 0 28px;
}

.tr1u-brand,
.tr1u-brand:hover,
.tr1u-brand:focus {
  color: #3213c8;
  font-family: 'Madera', sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.tr1u-brand-mark {
  width: 29px;
  height: 29px;
  border-radius: 10px;
  background: #5b39ee;
  color: #ffffff;
  font-size: 19px;
  transform: none;
}

.tr1u-nav {
  width: auto;
  flex: 1;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tr1u-nav-link {
  padding: 8px 10px;
  border-radius: 8px;
  color: #777488;
  font-size: 12px;
  letter-spacing: 0;
}

.tr1u-nav-link:hover,
.tr1u-nav-link.is-active {
  background: #f0edff;
  color: #4826d9;
}

.tr1u-nav-link.is-active .ti {
  color: #4826d9;
}

.tr1u-tools {
  margin-left: 0;
}

.tr1u-icon-button,
.tr1u-avatar {
  border-color: #e3e1ed;
  background: #ffffff;
  color: #4a4760;
}

.tr1u-icon-button:hover,
.tr1u-avatar:hover {
  border-color: #8c77f5;
  background: #f0edff;
  color: #4826d9;
}

.tr1u-avatar {
  background: #5b39ee;
  color: #ffffff;
}

.tr1u-main {
  min-height: calc(100dvh - 126px);
  padding: 0 0 34px;
}

.tr1u-page-heading {
  margin: 32px 28px 24px;
}

.tr1u-page-heading p,
.tr1u-panel-heading p,
.tr1u-metric p {
  color: #777488;
}

.tr1u-page-heading h1 {
  color: #171621;
  font-family: 'Madera', sans-serif;
  font-size: 30px;
  letter-spacing: -0.04em;
  text-transform: none;
}

.tr1u-breadcrumb {
  margin: -10px 28px 24px;
  color: #777488;
}

.tr1u-breadcrumb a {
  color: #5634e6;
}

.tr1u-footer {
  min-height: 58px;
  border-top: 1px solid #ebeaf2;
  color: #777488;
  font-size: 12px;
}

.tr1u-footer-desktop {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 0 28px;
}

.tr1u-footer a {
  color: inherit;
}

.tr1u-footer-signal {
  background: #5b39ee;
  box-shadow: 0 0 8px rgba(91, 57, 238, 0.5);
}

.tr1u-bottom-nav {
  display: none;
}

.tr1u-dashboard {
  display: block;
}

.tr1u-portfolio-hero {
  position: relative;
  min-height: 265px;
  overflow: hidden;
  padding: 28px 32px 88px;
  border-radius: 0 0 34px 34px;
  background:
    radial-gradient(ellipse 110% 90% at 112% 50%, rgba(147, 121, 255, 0.58) 0%, transparent 57%),
    radial-gradient(ellipse 75% 75% at 88% 115%, rgba(104, 79, 246, 0.82) 0%, transparent 64%),
    linear-gradient(135deg, #3013bd 0%, #4423d3 51%, #5938ea 100%);
  color: #ffffff;
}

.tr1u-portfolio-hero::before,
.tr1u-portfolio-hero::after {
  content: '';
  position: absolute;
  right: -110px;
  width: 335px;
  height: 190px;
  border: 1px solid rgba(210, 202, 255, 0.18);
  border-radius: 50%;
  transform: rotate(-20deg);
  pointer-events: none;
}

.tr1u-portfolio-hero::before {
  bottom: -103px;
  box-shadow:
    0 -15px 0 -14px rgba(210, 202, 255, 0.16),
    0 -31px 0 -30px rgba(210, 202, 255, 0.13),
    0 -47px 0 -46px rgba(210, 202, 255, 0.1),
    0 -63px 0 -62px rgba(210, 202, 255, 0.07);
}

.tr1u-portfolio-hero::after {
  right: -158px;
  bottom: -45px;
  opacity: 0.62;
}

.tr1u-dashboard-topbar,
.tr1u-portfolio-value {
  position: relative;
  z-index: 1;
}

.tr1u-dashboard-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tr1u-profile-chip {
  width: 39px;
  height: 39px;
  display: inline-flex;
  flex: 0 0 39px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: #211083;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.tr1u-profile-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tr1u-dashboard-topbar h1 {
  margin: 0;
  color: #ffffff;
  font-family: 'Madera', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.tr1u-dashboard-topbar h1 span {
  font-size: 16px;
}

.tr1u-dashboard-topbar p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: 11px;
}

.tr1u-hero-notification {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #ffffff;
}

.tr1u-hero-notification:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

.tr1u-hero-notification .ti {
  font-size: 19px;
}

.tr1u-portfolio-value {
  margin-top: 23px;
}

.tr1u-portfolio-value > p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 500;
}

.tr1u-portfolio-value > p .ti {
  font-size: 14px;
}

.tr1u-portfolio-value > strong {
  display: block;
  margin: 7px 0 6px;
  color: #ffffff;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

.tr1u-portfolio-value > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #4be98f;
  font-size: 11px;
  font-weight: 500;
}

.tr1u-portfolio-value > span.is-negative {
  color: #ff9898;
}

.tr1u-portfolio-value > span .ti {
  font-size: 14px;
}

.tr1u-portfolio-value em {
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}

.tr1u-quick-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: -55px 24px 0;
  /* Bottom padding is deliberately larger than the top: the row is icon-above-
     label, so the visual weight sits high and 9px underneath left the labels
     crowding the card's bottom edge. */
  padding: 16px 8px 24px;
  /* The bar is a <nav>, and Materialize fixes every nav at 56px (64px on
     wider screens). Without this the padding never showed: the box stayed
     that tall and the labels overflowed its bottom edge. */
  height: auto;
  border: 1px solid rgba(45, 32, 107, 0.08);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 10px 23px rgba(34, 20, 114, 0.14);
}

.tr1u-quick-action {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  color: #2e2c37;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
}

.tr1u-quick-action:hover {
  color: #4725d8;
}

.tr1u-quick-icon {
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #6e4cff, #3a19db);
  color: #ffffff;
  box-shadow: 0 5px 10px rgba(74, 42, 223, 0.2);
}

.tr1u-quick-icon.is-blue {
  background: linear-gradient(135deg, #2a9dff, #1872df);
}

.tr1u-quick-icon.is-orange {
  background: linear-gradient(135deg, #ffb331, #f18400);
}

.tr1u-quick-icon .ti {
  font-size: 21px;
}

.tr1u-content-section {
  margin: 27px 24px 0;
}

.tr1u-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.tr1u-section-heading h2 {
  margin: 0;
  color: #16151d;
  font-family: 'Madera', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.tr1u-section-heading a,
.tr1u-empty-card a {
  color: #4c2de0;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.tr1u-asset-scroller {
  display: flex;
  gap: 11px;
  margin: 0 -24px;
  padding: 0 24px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.tr1u-asset-scroller::-webkit-scrollbar {
  display: none;
}

.tr1u-asset-card {
  position: relative;
  min-width: 202px;
  min-height: 139px;
  display: flex;
  flex: 0 0 202px;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #eeeeF3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(31, 25, 71, 0.07);
  color: #171621;
  scroll-snap-align: start;
}

.tr1u-asset-card:hover {
  border-color: #cfc6ff;
  color: #171621;
  box-shadow: 0 9px 19px rgba(58, 38, 183, 0.12);
  transform: translateY(-2px);
}

.tr1u-asset-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr1u-asset-identity > img,
.tr1u-asset-monogram,
.tr1u-transaction-icon > img,
.tr1u-transaction-icon .tr1u-asset-monogram {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 50%;
}

.tr1u-asset-identity > img,
.tr1u-transaction-icon > img {
  object-fit: cover;
}

.tr1u-asset-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eeeaff;
  color: #4929dc;
  font-size: 12px;
  font-weight: 700;
}

.tr1u-asset-identity b,
.tr1u-asset-identity small {
  display: block;
  max-width: 115px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr1u-asset-identity b {
  color: #292735;
  font-size: 11px;
  line-height: 1.15;
}

.tr1u-asset-identity small {
  margin-top: 2px;
  color: #918e9d;
  font-size: 9px;
}

.tr1u-asset-card > strong {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: #171621;
  font-size: 15px;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tr1u-asset-card > small {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-top: 6px;
  color: #18af66;
  font-size: 10px;
  font-weight: 600;
}

.tr1u-asset-card > small.is-negative {
  color: #dc4d63;
}

.tr1u-asset-card > small .ti {
  font-size: 13px;
}

.tr1u-card-spark {
  position: absolute;
  right: -4px;
  bottom: 17px;
  width: 92px;
  height: 38px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  opacity: 0.64;
  transform: skewX(-18deg);
}

.tr1u-card-spark i {
  width: 15px;
  border-top: 2px solid #3bd790;
  transform: rotate(-32deg);
}

.tr1u-card-spark i:nth-child(1) { margin-bottom: 6px; }
.tr1u-card-spark i:nth-child(2) { margin-bottom: 15px; transform: rotate(31deg); }
.tr1u-card-spark i:nth-child(3) { margin-bottom: 9px; transform: rotate(-38deg); }
.tr1u-card-spark i:nth-child(4) { margin-bottom: 25px; transform: rotate(37deg); }
.tr1u-card-spark i:nth-child(5) { margin-bottom: 32px; transform: rotate(-22deg); }

.tr1u-card-spark.is-negative i {
  border-top-color: #e07180;
}

.tr1u-transactions-section {
  margin-top: 22px;
}

.tr1u-transaction-list {
  overflow: hidden;
  border: 1px solid #eeeeF3;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 4px 13px rgba(31, 25, 71, 0.05);
}

.tr1u-transaction-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 13px;
  border-top: 1px solid #f1f0f5;
  color: #1c1a25;
}

.tr1u-transaction-row:first-child {
  border-top: 0;
}

.tr1u-transaction-row:hover {
  background: #faf9ff;
  color: #1c1a25;
}

.tr1u-transaction-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}

.tr1u-transaction-copy,
.tr1u-transaction-value {
  min-width: 0;
}

.tr1u-transaction-copy {
  flex: 1;
}

.tr1u-transaction-copy b,
.tr1u-transaction-copy small,
.tr1u-transaction-value b,
.tr1u-transaction-value small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr1u-transaction-copy b {
  color: #2c2a35;
  font-size: 11px;
  font-weight: 600;
}

.tr1u-transaction-copy small,
.tr1u-transaction-value small {
  margin-top: 3px;
  color: #9794a3;
  font-size: 9px;
}

.tr1u-transaction-value {
  max-width: 42%;
  text-align: right;
}

.tr1u-transaction-value b {
  color: #18af66;
  font-size: 10px;
  font-weight: 700;
}

.tr1u-transaction-value.is-negative b {
  color: #dc4d63;
}

.tr1u-empty-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border: 1px dashed #d9d6e6;
  border-radius: 13px;
  background: #ffffff;
  color: #777488;
  font-size: 12px;
}

.tr1u-empty-card p {
  margin: 0;
}

@media (max-width: 767px) {
  .tr1u-header {
    display: none;
  }

  .tr1u-header-inner,
  .tr1u-main,
  .tr1u-footer {
    width: 100%;
  }

  .tr1u-main {
    min-height: 100dvh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .tr1u-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    min-height: 67px;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #e8e7ef;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -5px 18px rgba(31, 25, 71, 0.06);
  }

  .tr1u-footer-desktop {
    display: none;
  }

  .tr1u-bottom-nav {
    min-height: 67px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
  }

  .tr1u-bottom-nav a {
    display: grid;
    justify-items: center;
    gap: 3px;
    color: #8e8b99;
    font-size: 9px;
    line-height: 1;
  }

  .tr1u-bottom-nav .ti {
    font-size: 19px;
  }

  .tr1u-bottom-nav a.is-active {
    color: #5030df;
  }

  .tr1u-portfolio-hero {
    min-height: 238px;
    padding: 27px 22px 77px;
    border-radius: 0 0 28px 28px;
  }

  .tr1u-quick-actions {
    margin: -47px 14px 0;
  }

  .tr1u-content-section {
    margin-right: 16px;
    margin-left: 16px;
  }

  .tr1u-asset-scroller {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .tr1u-page-heading {
    margin: 25px 16px 20px;
  }

  .tr1u-breadcrumb {
    margin-right: 16px;
    margin-left: 16px;
  }
}

@media (max-width: 390px) {
  .tr1u-quick-actions {
    margin-right: 10px;
    margin-left: 10px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .tr1u-quick-action {
    font-size: 9px;
  }

  .tr1u-quick-icon {
    width: 35px;
    height: 35px;
  }

  .tr1u-portfolio-value > strong {
    font-size: 29px;
  }
}

/* Shared /user pages still use the Materialize theme tokens. Keep those
   surfaces in the same light-violet system as the portfolio screen even when
   the saved account preference is Dark. */
.tr1u-shell {
  --hover: #f1eeff;
  --nav-primary-font-colour: #29263a;
  --nav-secondary-font-colour: #ffffff;
  --primary-link-colour: #4c2de0;
  --secondary-link-colour: #4c2de0;
  --background-link-colour: #f1eeff;
  --background-colour: #f8f8fc;
  --background-font-colour: #514e60;
  --background-heading-colour: #171621;
  --primary-background: #ffffff;
  --primary-font-colour: #282534;
  --primary-border-colour: #e7e5ef;
  --primary-heading-colour: #171621;
  --secondary-background: #4825d6;
  --secondary-font-colour: #ffffff;
  --secondary-heading-colour: #ffffff;
  --border-colour: #e9e7f0;
}

.tr1u-shell .bg,
.tr1u-shell .card,
.tr1u-shell .collection .collection-item {
  background-color: #ffffff;
  color: #282534;
}

.tr1u-shell .collection .collection-item {
  margin-bottom: 7px;
  border: 1px solid #eceaf3;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(35, 28, 78, 0.05);
}

.tr1u-shell .collection .collection-item:hover {
  background-color: #f7f5ff;
}

.tr1u-shell .collection .collection-item,
.tr1u-shell .collection .collection-item .row,
.tr1u-shell .collection .collection-item .row > div,
.tr1u-shell .collection .collection-item .row > div > * {
  color: #282534;
}

.tr1u-shell .collection .collection-item .ti {
  color: #5634e6;
}

.tr1u-shell .collection .collection-item [style*='color: green'] {
  color: #18af66 !important;
}

.tr1u-shell .collection .collection-item [style*='color: red'] {
  color: #dc4d63 !important;
}

.tr1u-shell select.browser-default,
.tr1u-shell input:not([type='checkbox']):not([type='radio']),
.tr1u-shell textarea {
  box-sizing: border-box;
  border: 1px solid #d6cfef;
  border-radius: 8px;
  background: #ffffff;
  color: #29263a;
  box-shadow: none;
}

.tr1u-shell select.browser-default {
  height: 42px;
  padding: 0 10px;
  color: #5a4f97;
  font-size: 12px;
  font-weight: 600;
}

.tr1u-shell input:not([type='checkbox']):not([type='radio']):focus,
.tr1u-shell textarea:focus {
  border-bottom: 1px solid #5a39e9;
  box-shadow: 0 1px 0 #5a39e9;
}

.tr1u-shell input::placeholder,
.tr1u-shell textarea::placeholder {
  color: #9995a5;
}

.tr1u-shell .input-field > label {
  color: #777488;
}

.tr1u-shell .pagination li a,
.tr1u-shell .pagination li i,
.tr1u-shell .btn-flat,
.tr1u-shell .btn-color {
  color: #4c2de0 !important;
}

.tr1u-shell .tabs .tab a {
  color: #7059de;
}

.tr1u-shell .tabs .tab a:hover,
.tr1u-shell .tabs .tab a.active {
  color: #4421d4;
}

.tr1u-shell .tabs .indicator {
  background-color: #4c2de0;
}


/* ─── 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. */

.pr {
  min-height: 100vh;
  min-height: 100dvh;
}

.pr > footer {
  position: sticky;
  top: 100vh;
}

/* Favourited asset. Tabler outline has a single star glyph in the one weight this skin
   loads, so the active state is carried by colour rather than a filled variant. */
.is-fav {
  color: #f5a524;
}

@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;

  /* The "included" tick on the plan cards. Was hardcoded inline in three
     separate copies of the plan card; defined here so it is themeable in one
     place. The value is the teal those cards already used. */
  --plan-check-colour: #30bca6;
}

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;
}