.ocelot-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-ocelot-email-form="true"] { width: 100%; }

.ocelot-waitlist-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  gap: 8px;
}

.ocelot-waitlist-form input,
.ocelot-waitlist-form button {
  min-height: 50px;
  border-radius: 2px;
  font: 500 12px/1 "Inter", "Inter Display", Arial, sans-serif;
}

.ocelot-waitlist-form input {
  min-width: 0;
  padding: 0 15px;
  color: #f3f3f3;
  background: rgba(17, 17, 20, .82);
  border: 1px solid #34343b;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}

.ocelot-waitlist-form input::placeholder { color: #77777e; }
.ocelot-waitlist-form input:focus { border-color: #6e8cff; background: #111114; }

.ocelot-waitlist-form button {
  padding: 0 19px;
  color: #fff;
  background: #5b7fff;
  border: 1px solid #5b7fff;
  cursor: pointer;
}

.ocelot-waitlist-form button:hover { background: #6a8aff; }
.ocelot-waitlist-form button:disabled { cursor: wait; opacity: .62; }

.ocelot-waitlist-status {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 2px 0 0;
  color: #9ba8cf;
  font: 400 11px/1.5 "Inter", "Inter Display", Arial, sans-serif;
}

.ocelot-waitlist-status[data-state="error"] { color: #e08a8e; }
.ocelot-waitlist-status[data-state="success"] { color: #a8b8eb; }

.ocelot-rebalance {
  position: relative;
  overflow: hidden;
  color: #f2eeef;
  border: 1px solid #252a33 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(15, 18, 25, .98), rgba(9, 11, 16, .98)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .22);
}

.ocelot-rebalance::before {
  content: "";
  position: absolute;
  inset: -180px -140px auto auto;
  width: 360px;
  height: 360px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(91, 127, 255, .13), transparent 68%);
}

.ocelot-rebalance-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  border-bottom: 1px solid #252a33;
}

.ocelot-rebalance-head span,
.ocelot-rebalance-stats span,
.ocelot-leverage-band__head span {
  color: #7f8798;
  font: 600 9px/1.2 "Inter", "Inter Display", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ocelot-rebalance-head h3 {
  margin: 8px 0 0;
  font: 500 19px/1.25 "Inter", "Inter Display", Arial, sans-serif;
  letter-spacing: -.025em;
}

.ocelot-rebalance-head button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: #b7bed0;
  border: 1px solid #303642;
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font: 500 10px/1 "Inter", "Inter Display", Arial, sans-serif;
}

.ocelot-rebalance-head button:hover { color: #fff; border-color: #4c5770; }
.ocelot-rebalance-head button i { color: #6f8fff; font: 14px/1 sans-serif; }

.ocelot-rebalance-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #252a33;
}

.ocelot-rebalance-stats > div { padding: 15px 20px; border-left: 1px solid #252a33; }
.ocelot-rebalance-stats > div:first-child { border-left: 0; }
.ocelot-rebalance-stats b { display: block; margin-top: 8px; font: 600 13px/1.2 "Inter", sans-serif; }
.ocelot-rebalance-stats i { margin: 0 4px; color: #5b7fff; font-style: normal; }

.ocelot-rebalance-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, .8fr);
  min-height: 290px;
  border-bottom: 1px solid #252a33;
}

.ocelot-rebalance-chart { position: relative; min-width: 0; padding: 18px 20px 14px; border-right: 1px solid #252a33; }
.ocelot-rebalance-chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.ocelot-rebalance-grid path { fill: none; stroke: #202631; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ocelot-rebalance-fill { fill: url(#ocelot-chart-fill); }
.ocelot-rebalance-market,
.ocelot-rebalance-token { fill: none; vector-effect: non-scaling-stroke; }
.ocelot-rebalance-market { stroke: #697181; stroke-width: 1.5; }
.ocelot-rebalance-token { stroke: #6f8fff; stroke-width: 2.5; }
.ocelot-rebalance-marker path { stroke: rgba(232, 238, 255, .22); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ocelot-rebalance-marker circle { fill: #8ea5ff; stroke: #10141d; stroke-width: 4; vector-effect: non-scaling-stroke; }
.ocelot-rebalance-marker rect { fill: #171c27; stroke: #333d52; vector-effect: non-scaling-stroke; }
.ocelot-rebalance-marker text { fill: #adb9dc; font: 600 9px/1 "Inter", sans-serif; letter-spacing: .05em; }

.ocelot-rebalance-legend { display: flex; gap: 18px; margin-top: 8px; color: #747c8d; font: 500 10px/1 "Inter", sans-serif; }
.ocelot-rebalance-legend span::before { content: ""; display: inline-block; width: 16px; height: 2px; margin: 0 7px 3px 0; background: #697181; }
.ocelot-rebalance-legend span:last-child { color: #9cadf1; }
.ocelot-rebalance-legend span:last-child::before { background: #6f8fff; }

.ocelot-leverage-band { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 24px; }
.ocelot-leverage-band__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ocelot-leverage-band__head b { color: #dbe2ff; font: 600 12px/1 "Inter", sans-serif; }
.ocelot-leverage-band__track { position: relative; height: 74px; margin-top: 20px; }
.ocelot-leverage-band__track::before { content: ""; position: absolute; top: 23px; right: 0; left: 0; height: 7px; border-radius: 8px; background: #1b202a; }
.ocelot-leverage-band__track i { position: absolute; top: 23px; left: 17%; width: 66%; height: 7px; border-radius: 8px; background: rgba(91, 127, 255, .34); }
.ocelot-leverage-band__track span { position: absolute; top: 42px; color: #6f7788; font: 500 9px/1 "Inter", sans-serif; }
.ocelot-leverage-band__track .low { left: 14%; }
.ocelot-leverage-band__track .target { left: 50%; transform: translateX(-50%); color: #abb6d6; }
.ocelot-leverage-band__track .high { right: 12%; }
.ocelot-leverage-band__track u { position: absolute; top: 17px; left: 50%; width: 18px; height: 18px; border: 4px solid #11151d; border-radius: 50%; background: #8ea5ff; box-shadow: 0 0 0 1px #8ea5ff; text-decoration: none; }
.ocelot-leverage-band p { margin: 2px 0 0; color: #838b9c; font: 400 11px/1.55 "Inter", sans-serif; }

.ocelot-rebalance-events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ocelot-rebalance-events article { display: flex; min-width: 0; gap: 12px; padding: 18px 20px; border-left: 1px solid #252a33; }
.ocelot-rebalance-events article:first-child { border-left: 0; }
.ocelot-rebalance-events article > span { color: #627ccf; font: 600 10px/1.2 "Inter", sans-serif; }
.ocelot-rebalance-events b { font: 600 12px/1.2 "Inter", sans-serif; }
.ocelot-rebalance-events p { margin: 6px 0 0; color: #7f8798; font: 400 10px/1.45 "Inter", sans-serif; }
.ocelot-rebalance-note { margin: 0; padding: 13px 20px; color: #6f7788; border-top: 1px solid #252a33; font: 400 10px/1.5 "Inter", sans-serif; }
.ocelot-rebalance-note b { color: #9ca6b9; font-weight: 600; }

.ocelot-rebalance.is-playing .ocelot-rebalance-market,
.ocelot-rebalance.is-playing .ocelot-rebalance-token { animation: ocelot-path 1.7s cubic-bezier(.3, .7, .3, 1) both; stroke-dasharray: 1; }
.ocelot-rebalance.is-playing .ocelot-rebalance-token { animation-delay: .14s; }
.ocelot-rebalance.is-playing .ocelot-rebalance-fill { animation: ocelot-fade-up 1s .45s both; }
.ocelot-rebalance.is-playing .ocelot-rebalance-marker { animation: ocelot-marker .5s 1.35s both; }
.ocelot-rebalance.is-playing .ocelot-leverage-band__track u { animation: ocelot-leverage 2.3s .35s cubic-bezier(.45, 0, .2, 1) both; }
.ocelot-rebalance.is-playing .ocelot-rebalance-events article { animation: ocelot-fade-up .45s both; }
.ocelot-rebalance.is-playing .ocelot-rebalance-events article:nth-child(1) { animation-delay: .35s; }
.ocelot-rebalance.is-playing .ocelot-rebalance-events article:nth-child(2) { animation-delay: 1.15s; }
.ocelot-rebalance.is-playing .ocelot-rebalance-events article:nth-child(3) { animation-delay: 1.8s; }

@keyframes ocelot-path { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ocelot-fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ocelot-marker { from { opacity: 0; } to { opacity: 1; } }
@keyframes ocelot-leverage {
  0% { left: 50%; }
  48% { left: 86%; }
  68% { left: 86%; }
  100% { left: 52%; }
}

@media (max-width: 720px) {
  .ocelot-waitlist-form { grid-template-columns: 1fr; }
  .ocelot-rebalance-stats { grid-template-columns: 1fr; }
  .ocelot-rebalance-stats > div { border-top: 1px solid #252a33; border-left: 0; }
  .ocelot-rebalance-stats > div:first-child { border-top: 0; }
  .ocelot-rebalance-visual { grid-template-columns: 1fr; }
  .ocelot-rebalance-chart { border-right: 0; border-bottom: 1px solid #252a33; }
  .ocelot-rebalance-events { grid-template-columns: 1fr; }
  .ocelot-rebalance-events article { border-top: 1px solid #252a33; border-left: 0; }
  .ocelot-rebalance-events article:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ocelot-rebalance.is-playing * { animation: none !important; }
}

/* Helvetica Neue remap: see ocelot-framer.css. Funnel Display is this
 * export's display sans. */
@font-face { font-family: "Funnel Display"; font-weight: 100 500; src: local("Helvetica Neue"); }
@font-face { font-family: "Funnel Display"; font-weight: 501 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); }
@font-face { font-family: "Inter"; font-weight: 100 500; src: local("Helvetica Neue"); }
@font-face { font-family: "Inter"; font-weight: 501 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); }