/* Work-sample cards from the Figma frames Desktop 2–8.
   Sizes and offsets are the design's own px values. */

@font-face {
  font-family: "Lebowski";
  src: url("assets/fonts/lebowski-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.card,
.card * {
  letter-spacing: normal;
}

.card img {
  display: block;
  max-width: none;
}

.card p {
  margin: 0;
}

/* Wrappers whose image overflows them, like Figma's negative-inset icons */
.card [class$="__icon"],
.card .ph-info__filter,
.ph-reward__t,
.ph-reward__shape > span,
.margin__pattern,
.withdraw__glow,
.bars__pointer > span {
  position: relative;
  display: block;
  flex-shrink: 0;
}

.card [class$="__icon"] > img,
.card .ph-info__filter > img,
.ph-reward__t > img,
.ph-reward__shape img,
.margin__pattern > img,
.withdraw__glow > img,
.bars__pointer img {
  position: absolute;
  width: auto;
  height: auto;
}

/* ---------- Steps ---------- */

/* cards.js swaps the radius for a 80%-smoothed squircle clip-path, as in Figma */
.steps {
  width: 282.254px;
  height: 167px;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  font-feature-settings: "case" 1, "ordn" 1, "ss01" 1, "ss02" 1;
}

.steps__img {
  position: absolute;
  left: 0;
  top: -70.09px;
  width: 282.254px;
  height: 352.817px;
  object-fit: cover;
}

.steps__label {
  position: absolute;
  left: 36.17px;
  top: 23.61px;
  transform: translate(-50%, -50%);
  font: 400 15.054px/normal "Lebowski", "Host Grotesk", sans-serif;
  letter-spacing: -0.4516px;
  color: #fff;
  white-space: nowrap;
}

.steps__value {
  position: absolute;
  left: 21.17px;
  top: 135.55px;
  transform: translateY(-50%);
  font: 400 26.344px/1.2 "Lebowski", "Host Grotesk", sans-serif;
  letter-spacing: -0.79px;
  color: #fff;
  white-space: nowrap;
}

/* Odometer: each digit is a clipped column of 0–9 that rolls to its value */
.odo {
  display: inline-flex;
  letter-spacing: 0;
}

.odo__slot {
  position: relative;
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
}

.odo__reel {
  display: flex;
  flex-direction: column;
  transition: transform var(--odo-time, 1.8s) cubic-bezier(0.16, 1, 0.3, 1);
}

.odo__reel span {
  height: 1.2em;
}

/* ---------- Phone ---------- */

.phone {
  width: 272px;
  height: 550px;
  font-family: "Host Grotesk", sans-serif;
  color: #fff;
}

/* The eye beside the phone opens the focusapp case (case.js) */
.phone__case {
  position: absolute;
  z-index: 2;
  left: 296px;
  top: 24px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.7, 0.5, 1), box-shadow 0.3s ease-out;
}

.phone__case svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.phone__case:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(217, 217, 217, 0.25), 0 0 18px rgba(255, 255, 255, 0.08);
}

.phone__case:active {
  transform: scale(0.94);
  transition-duration: 0.08s;
}

.phone__case:focus-visible {
  outline: 1px solid rgba(217, 217, 217, 0.7);
  outline-offset: 3px;
}

/* In the one-column layout there is no room to the right: the eye sits on the
   phone's top-right corner */
@media (max-width: 1023px) {
  .phone__case {
    left: auto;
    right: -10px;
    top: -14px;
  }
}

.phone__shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 487.29px;
  height: 680.3px;
  opacity: 0.8;
}

.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.phone__under {
  position: absolute;
  inset: 1.89% 5% 2.1% 5.43%;
  background: #000;
  border-radius: 34px;
}

.phone__screen {
  position: absolute;
  left: 14px;
  top: 11px;
  width: 244px;
  height: 528px;
  background: #000;
  border-radius: 34px;
  overflow: hidden;
  font-size: 9.991px; /* the profile name's size; only the tab bar stays smaller */
  line-height: normal;
  white-space: nowrap;
}

.phone__screen > * {
  position: absolute;
}

.ph-status {
  left: 0;
  top: 1px;
  width: 243.519px;
  height: 34.967px;
}

.ph-status__time {
  position: absolute;
  left: 33.96px;
  top: 17px;
  transform: translate(-50%, -50%);
  font: 600 10.615px/normal -apple-system, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.2123px;
}

.ph-status__icons {
  position: absolute;
  right: 19.5px;
  top: 50%;
  width: 48.704px;
  height: 8.742px;
  transform: translateY(-55%);
}

.ph-row {
  left: 0;
  width: 243.519px;
  height: 29.972px;
  padding: 0 9.991px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ph-header {
  top: 35.97px;
  font-size: 9.991px;
}

.ph-user,
.ph-token {
  display: flex;
  align-items: center;
}

.ph-user {
  gap: 4.995px;
}

.ph-user .ph-chev {
  margin-left: -2.5px;
}

.ph-ava {
  position: relative;
  width: 24.976px;
  height: 24.976px;
  border-radius: 50%;
  background: #efefef;
  overflow: hidden;
}

.ph-ava img {
  position: absolute;
  object-fit: cover;
}

.ph-ava__bg {
  left: -2.5px;
  top: -1.87px;
  width: 31.22px;
  height: 28.723px;
}

.ph-ava__face {
  left: -1.25px;
  top: -2.5px;
  width: 28.098px;
  height: 29.972px;
}

.ph-chev {
  width: 9.991px;
  height: 9.991px;
  transform: rotate(180deg);
}

.ph-token {
  gap: 7.493px;
}

.ph-token__icon {
  width: 19.981px;
  height: 19.981px;
}

.ph-token__icon > img {
  inset: 0 -12.5% -25% -12.5%;
  width: 125%;
  height: 125%;
}

.ph-level {
  top: 80.92px;
}

.ph-level__info {
  display: flex;
  flex-direction: column;
  gap: 2.498px;
}

.ph-level__info b {
  font-weight: 500;
}

.ph-level__bar {
  position: relative;
  width: 80.549px;
  height: 7.493px;
}

.ph-level__bar i {
  position: absolute;
  top: 2.81px;
  height: 2.498px;
}

.ph-level__bar i:first-child {
  left: 53.07px;
  width: 27.474px;
  background: #585858;
}

.ph-level__bar i:last-child {
  left: 0;
  width: 52.45px;
  background: #fff;
}

.ph-connect {
  display: flex;
  align-items: center;
  gap: 3.122px;
  padding: 6.244px 12.488px 6.244px 9.991px;
  border-radius: 40px;
  background: #1c1c1c;
}

.ph-connect img {
  width: 12.488px;
  height: 12.488px;
}

.ph-tabs {
  left: 0;
  top: 125.88px;
  width: 243.519px;
  height: 24.976px;
  padding: 0 9.991px;
  display: flex;
  justify-content: flex-end;
}

.ph-tabs__breath {
  position: relative;
  width: 42.46px;
  height: 24.976px;
  overflow: hidden;
}

.ph-tabs__breath span {
  position: absolute;
  left: 24.62px;
  top: 12.87px;
  transform: translate(-50%, -50%);
  font-size: 12.488px;
  letter-spacing: 0.2498px;
  opacity: 0.5;
}

.ph-tabs__breath i {
  position: absolute;
  left: 14.99px;
  top: 0;
  width: 27.474px;
  height: 24.976px;
  background: linear-gradient(-90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.ph-tabs__focus {
  position: absolute;
  left: calc(50% + 0.27px);
  top: 12.75px;
  transform: translate(-50%, -50%);
  font-size: 17.483px;
  letter-spacing: 0.3497px;
}

.ph-info {
  left: 9.99px;
  top: 168.34px;
  display: flex;
  align-items: center;
}

.ph-info__icon {
  width: 24.976px;
  height: 24.976px;
  margin-right: -2.498px;
}

.ph-info__icon > img {
  inset: -1.25%;
  width: 102.5%;
  height: 102.5%;
}

.ph-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24.976px;
  height: 24.976px;
  border: 0.624px solid #1d1d1d;
  border-radius: 50%;
  background: #000;
}

.ph-info__filter {
  width: 11.239px;
  height: 9.366px;
}

.ph-info__filter > img {
  inset: -5% -4.17%;
  width: 108.34%;
  height: 110%;
}

.ph-task {
  left: calc(50% - 0.21px);
  top: 181.02px;
  transform: translate(-50%, -50%);
  color: #9f9f9f;
  letter-spacing: -0.0812px;
}

.ph-invite {
  left: calc(87.5% - 4.95px);
  top: 168.34px;
  background: transparent;
}

.ph-invite img {
  width: 12.488px;
  height: 12.488px;
}

.ph-picker {
  left: 22.48px;
  top: 205.81px;
  width: 199.81px;
  height: 134.872px;
  overflow: hidden;
}

.ph-picker > * {
  position: absolute;
}

/* The drum turns: drag it, scroll over it or use the arrow keys (cards.js).
   --drum-y is the live offset of the numbers while it moves. */
.ph-picker {
  --drum-y: 0px;
  cursor: grab;
  /* A swipe over the phone scrolls the page; on touch the drum turns after a short
     hold or a tap on the number above/below (cards.js) */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}

.ph-picker.is-turning {
  cursor: grabbing;
}

.ph-picker__main,
.ph-picker__alt {
  translate: 0 var(--drum-y);
}

.ph-picker.is-settling .ph-picker__main,
.ph-picker.is-settling .ph-picker__alt {
  transition: translate 0.35s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.ph-picker:focus-visible .ph-picker__num {
  text-shadow: 0 0 24.976px #eaffff, 0 0 2px #fff;
}

.ph-picker__main {
  left: calc(50% + 7.81px);
  top: 33.09px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 2.498px;
}

.ph-picker__num {
  font-size: 49.953px;
  text-shadow: 0 0 24.976px #eaffff;
}

.ph-picker__unit {
  color: #9f9f9f;
  letter-spacing: -0.0812px;
}

.ph-picker__alt {
  left: calc(50% - 0.73px);
  transform: translate(-50%, -50%);
  font-size: 31.22px;
  opacity: 0.5;
}

.ph-picker__alt--top {
  top: 21px;
}

.ph-picker__alt--bottom {
  top: 114.04px;
}

.ph-picker__fade {
  left: 44.96px;
  background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0) 138.46%);
}

.ph-picker__fade--top {
  top: 5px;
  width: 108.647px;
  height: 28.098px;
}

.ph-picker__fade--bottom {
  top: 101.04px;
  width: 174px;
  height: 45px;
  transform: rotate(180deg);
}

.ph-picker__line {
  left: 0;
  width: 199.81px;
  height: 1.249px;
  margin-top: -0.62px;
}

.ph-reward {
  left: calc(43.75% + 9.7px);
  top: 348.17px;
  width: 109.271px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.995px;
}

.ph-muted {
  margin-right: 2.498px;
  color: #9f9f9f;
  letter-spacing: -0.0812px;
}

.ph-reward__badge {
  position: relative;
  width: 28.723px;
  height: 21.854px;
}

.ph-reward__t {
  position: absolute;
  left: 15.61px;
  top: 0.31px;
  width: 13.113px;
  height: 12.488px;
}

.ph-reward__t > img {
  inset: 0 -14.29% -30% -14.29%;
  width: 128.58%;
  height: 130%;
}

.ph-reward__shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 19.981px;
  height: 21.854px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-reward__shape > span {
  width: 21.854px;
  height: 19.981px;
  transform: rotate(-90deg);
}

.ph-reward__shape img {
  inset: 0 -9.43% -25% -9.43%;
  width: 118.86%;
  height: 125%;
}

.ph-reward__num {
  position: absolute;
  left: 9.99px;
  top: 10.93px;
  transform: translate(-50%, -50%);
  font-size: 10.615px;
  font-weight: 500;
  letter-spacing: -0.3184px;
  color: #000;
}

.ph-pill {
  top: 390.01px;
  display: flex;
  align-items: center;
  gap: 2.498px;
  border: 0.624px solid #1d1d1d;
}

.ph-sound {
  left: calc(31.25% + 10.85px);
  transform: translateX(-50%);
  padding: 4.995px 12.488px 4.995px 7.493px;
  border-radius: 24.976px 0 0 24.976px;
}

.ph-sound img {
  width: 14.986px;
  height: 14.986px;
}

.ph-sound span {
  width: 43.084px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-mode {
  left: calc(50% + 5.38px);
  padding: 7.181px 7.493px 7.181px 9.991px;
  border-radius: 0 24.976px 24.976px 0;
}

.ph-start {
  left: calc(50% - 0.24px);
  top: 434.96px;
  width: 81.173px;
  height: 29.972px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 31.22px;
  background: #fff;
  color: #000;
  font-size: 9.991px;
  font-weight: 500;
  letter-spacing: 0.281px;
  text-transform: uppercase;
}

.ph-strict {
  left: calc(87.5% - 6.51px);
  top: 435.59px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.995px;
  font-size: 9.991px;
  font-weight: 500;
  line-height: 1.2;
}

.ph-strict img {
  width: 24.976px;
  height: 14.986px;
}

.ph-tabbar {
  left: 0;
  top: 484.29px;
  width: 243.519px;
  padding: 0 9.991px;
  display: flex;
  justify-content: space-between;
}

.ph-tabbar span {
  width: 49.953px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.249px;
  font-size: 7.49px;
  font-weight: 500;
}

.ph-tabbar span + span {
  opacity: 0.5;
}

.ph-tabbar img {
  width: 19.981px;
  height: 19.981px;
}

.ph-home {
  left: calc(50% - 0.16px);
  bottom: 3.12px;
  width: 86.793px;
  height: 3.122px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #4b4b4b;
}

/* ---------- AI input ---------- */

.ai {
  width: 418.6px;
  height: 264px;
  font: 500 14.804px/normal -apple-system, "SF Pro Display", system-ui, sans-serif;
  color: #f3f3f3;
  white-space: nowrap;
}

.ai__back {
  position: absolute;
  left: 23.85px;
  top: 0;
  width: 394.766px;
  height: 264px;
}

.ai__back > * {
  position: absolute;
}

/* The item's transform isolates it, so the blend layers need the page colour to blend against */
.ai__back::before {
  content: "";
  position: absolute;
  inset: -80px -80px -80px -20px;
  background: #060606;
}

.ai__b1 {
  left: 128.3px;
  top: 35.36px;
  width: 266.467px;
  height: 228.636px;
  border-radius: 20.561px;
  filter: blur(32.897px);
  mix-blend-mode: darken;
  opacity: 0.5;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 266.47 228.64' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.3'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-23.074 18.875 -21.998 -25.743 250.92 18.505)'><stop stop-color='rgba(8,24,74,1)' offset='0'/><stop stop-color='rgba(12,27,113,1)' offset='0.19458'/><stop stop-color='rgba(17,30,152,1)' offset='0.38917'/><stop stop-color='rgba(36,49,156,1)' offset='0.46552'/><stop stop-color='rgba(56,68,161,1)' offset='0.54188'/><stop stop-color='rgba(94,105,171,1)' offset='0.69458'/><stop stop-color='rgba(133,143,180,1)' offset='0.84729'/><stop stop-color='rgba(172,180,190,1)' offset='1'/></radialGradient></defs></svg>");
}

.ai__b2,
.ai__b3 {
  left: 0;
  top: 35.36px;
  width: 394.766px;
  height: 228.636px;
  border-radius: 32.897px;
}

.ai__b2 {
  background: rgba(93, 95, 101, 0.1);
  border: 6.579px solid #1c1f26;
  filter: blur(3.29px);
}

.ai__b3 {
  background: rgba(99, 111, 136, 0.3);
  border: 4.112px solid rgba(28, 31, 38, 0.8);
  filter: blur(10.28px);
  mix-blend-mode: darken;
  opacity: 0.2;
}

.ai__b4 {
  left: 113.5px;
  top: 5.76px;
  width: 258.243px;
  height: 229.458px;
  border-radius: 32.897px;
  filter: blur(32.897px);
  mix-blend-mode: color;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 258.24 229.46' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.6'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-22.362 18.943 -21.319 -25.835 243.17 18.571)'><stop stop-color='rgba(6,58,224,1)' offset='0'/><stop stop-color='rgba(17,87,232,1)' offset='0.097292'/><stop stop-color='rgba(28,116,240,1)' offset='0.19458'/><stop stop-color='rgba(50,173,255,1)' offset='0.38917'/><stop stop-color='rgba(81,175,239,1)' offset='0.54188'/><stop stop-color='rgba(111,177,223,1)' offset='0.69458'/><stop stop-color='rgba(172,180,190,1)' offset='1'/></radialGradient></defs></svg>");
}

.ai__ghost {
  top: 207.25px;
  height: 37.009px;
  padding: 1.65px 0 0 14.8px;
  border: 4.112px solid rgba(28, 31, 38, 0.5);
  border-radius: 24.673px;
  background: rgba(182, 188, 200, 0.3);
  filter: blur(6.579px);
  mix-blend-mode: darken;
  overflow: hidden;
}

.ai__ghost--primary {
  background: #2a4ff6;
  filter: blur(8.224px);
}

.ai__input {
  position: absolute;
  left: 0;
  top: 6px;
  width: 395px;
  height: 228px;
  border-radius: 32.897px;
  overflow: hidden;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 395 228' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.05'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(37.072 20.012 -34.669 63.794 17.693 27.885)'><stop stop-color='rgba(15,16,21,1)' offset='0'/><stop stop-color='rgba(33,35,47,1)' offset='0.25'/><stop stop-color='rgba(51,55,72,1)' offset='0.5'/><stop stop-color='rgba(70,74,98,1)' offset='0.75'/><stop stop-color='rgba(88,94,123,1)' offset='1'/></radialGradient></defs></svg>");
}

.ai__field {
  position: absolute;
  left: 25.5px;
  top: 25.25px;
  width: 340px;
  height: 24px;
  transition: opacity 0.2s;
}

.ai__prompt {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  /* Just enough for the 2px caret: the placeholder sits right against it */
  padding-left: 3px;
  font: 500 14.804px/24px "DM Mono", ui-monospace, monospace;
  color: #fff;
  caret-color: transparent; /* the shimmering .ai__caret replaces the native one */
  cursor: text;
}

.ai__prompt::placeholder {
  color: rgba(255, 255, 255, 0.42);
  opacity: 1;
}

/* Caret in the spirit of the new Siri glow: colours flowing through a soft,
   glowing bar that blinks like a system caret; cards.js moves it to the text position */
.ai__caret {
  position: absolute;
  left: 0;
  top: 1px;
  width: 2px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3d8bff, #a45cff, #ff4fa3, #ff9a3c, #42e3ff, #3d8bff);
  background-size: 100% 400%;
  pointer-events: none;
  transform: translateX(var(--cx, 0px));
  animation: siri-flow 2.4s linear infinite, caret-blink 1.06s infinite;
}

/* Glow: a blurred copy of the same flowing gradient */
.ai__caret::after {
  content: "";
  position: absolute;
  inset: -1px -1.5px;
  border-radius: 3px;
  background: inherit;
  background-size: inherit;
  animation: inherit;
  animation-name: siri-flow;
  filter: blur(2.5px);
  opacity: 0.45;
}

/* Solid while typing, like a system caret */
.ai__caret.is-typing {
  animation: siri-flow 2.4s linear infinite;
}

.ai__caret[hidden] {
  display: none;
}

@keyframes siri-flow {
  to { background-position: 0 100%; }
}

/* System-like blink: on for half a cycle, fully off for the other half, quick fades */
@keyframes caret-blink {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai__caret,
  .ai__caret::after {
    animation: none;
  }
}

/* Liquid Glass capsules, rebuilt from the Figma GLASS effect
   (refraction .32, depth 24, dispersion .32, light .8, frost 4):
   under-layer = dark ring + white shine + mirrored label; the glass layer on top
   refracts it through an SVG lens (cards.js) and adds rim light + inner shadow. */
.lg-btn {
  position: absolute;
  top: 171.18px;
  width: 72px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 500 12px/16px "DM Mono", ui-monospace, monospace;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}

.lg-btn--primary {
  width: 104px;
}

.lg-btn > span,
.lg-btn__under > * {
  position: absolute;
  pointer-events: none;
}

.lg-btn__under {
  inset: 0;
  overflow: hidden; /* clips the mirrored label to the capsule */
  border-radius: 999px;
  /* clip-path also clips the filter's output (overflow doesn't in WebKit) */
  clip-path: inset(0 round 999px);
}

/* Only the glass moves on hover/press. Scaling the whole button re-rasterised the
   label every time and the text visibly jumped, so the label stays put. */
.lg-btn__under,
.lg-btn__glass {
  /* Spring back like an interactive glass element */
  transition: transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1);
  will-change: transform;
}

/* Figma's dark ring under the glass, diffused so it reads as depth inside the glass
   rather than a second outline */
.lg-btn__ring {
  left: 4px;
  top: 4px;
  width: 64px;
  height: 31px;
  border: 5px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  box-sizing: border-box;
  filter: blur(3px);
}

/* The lens stretches the blue pill out to the rim, so the fill spans the whole capsule */
.lg-btn--primary .lg-btn__ring {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #2d57dc;
  filter: none;
}

.lg-btn__shine {
  left: 50%;
  top: 27px;
  width: 50px;
  height: 10px;
  margin-left: -25px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.25) 45%, #fff);
  opacity: 0.5; /* softer than Figma: the lens already spreads it under the label */
}

.lg-btn__mirror {
  left: 50%;
  top: 20.51px;
  transform: translateX(-50%);
  opacity: 0.3;
  white-space: nowrap;
}

/* The glass itself: lens on the backdrop, hairline edge, rim light, inner shadow */
.lg-btn__glass {
  inset: 0;
  border: 0.3px solid #000; /* hairline outline on every button */
  border-radius: 999px;
  /* Figma light .8 from above: the glass body brightens towards the bottom edge */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 10%, rgba(255, 255, 255, 0.16) 90%);
  /* No backdrop-filter here: inside the transformed scene Chrome can sample the backdrop
     from the wrong place, which mirrored the blinking caret onto Back. The lens on
     .lg-btn__under already provides the glass. */
  box-shadow:
    inset 0 0.5px 0.25px rgba(255, 255, 255, 0.29),
    inset 0 -0.5px 0.25px rgba(255, 255, 255, 0.1),
    inset 0 4px 12px rgba(0, 0, 0, 0.25);
}

.lg-btn--primary .lg-btn__glass {
  background: linear-gradient(to bottom, transparent 30%, rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 0.5px 0.25px rgba(255, 255, 255, 0.35),
    inset 0 -0.5px 0.25px rgba(255, 255, 255, 0.14),
    inset 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* The glass refracts what lies under it: the lens filter (cards.js) bends and frosts the under-layer */
.lg-btn__under[data-lens] {
  filter: var(--lens);
}

/* Without the SVG lens (Safari / iPhone, see cards.js) a plain blur frosts the shine
   and mirrored label into the same soft glow */
.lg-btn__under[data-soft] {
  filter: blur(2.5px);
}

/* Interactive glass (Apple's .interactive()): on hover the whole capsule lights up
   from inside. The light is biased towards the pointer but fills the surface,
   the rim brightens and the button lifts a little; a press compresses and flares. */
.lg-btn__glass {
  transition: box-shadow 0.35s ease-out, transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1);
}

.lg-btn__glass::before,
.lg-btn__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

/* Body illumination: an even wash plus a broad bloom around the pointer */
.lg-btn__glass::before {
  background:
    radial-gradient(ellipse 120% 160% at var(--mx, 50%) var(--my, 60%), rgba(255, 255, 255, 0.2), transparent 75%),
    rgba(255, 255, 255, 0.06);
  mix-blend-mode: plus-lighter;
}

/* Rim catching the light: a thin bright edge, strongest on the pointer side */
.lg-btn__glass::after {
  padding: 0.5px;
  background: radial-gradient(ellipse 90% 140% at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.53), rgba(255, 255, 255, 0.08) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.lg-btn:hover .lg-btn__under,
.lg-btn:hover .lg-btn__glass {
  transform: scale(1.012);
}

.lg-btn:hover .lg-btn__glass::before,
.lg-btn:hover .lg-btn__glass::after,
.lg-btn:focus-visible .lg-btn__glass::before {
  opacity: 1;
}

.lg-btn:hover .lg-btn__glass {
  box-shadow:
    inset 0 0.5px 0.25px rgba(255, 255, 255, 0.42),
    inset 0 -0.5px 0.25px rgba(255, 255, 255, 0.17),
    inset 0 4px 12px rgba(0, 0, 0, 0.18);
}

.lg-btn--primary:hover .lg-btn__glass {
  box-shadow:
    inset 0 0.5px 0.25px rgba(255, 255, 255, 0.49),
    inset 0 -0.5px 0.25px rgba(255, 255, 255, 0.21),
    inset 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* The tinted button glows in its own colour rather than going milky */

.lg-btn:active .lg-btn__glass::before {
  opacity: 1;
  filter: brightness(1.6);
  transition-duration: 0.08s;
}

.lg-btn__label {
  left: 0;
  right: 0;
  top: 10px;
  text-align: center;
  /* Its own still layer: changes in the glass underneath never re-render the text */
  transform: translateZ(0);
}

.lg-btn:active .lg-btn__under,
.lg-btn:active .lg-btn__glass {
  transform: scale(0.95);
  transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .lg-btn:hover .lg-btn__under,
  .lg-btn:hover .lg-btn__glass,
  .lg-btn:active .lg-btn__under,
  .lg-btn:active .lg-btn__glass {
    transform: none;
  }
}

.lg-btn:focus-visible {
  outline: 1px solid #2a53d3;
  outline-offset: 2px;
}

/* ---------- Create: clear tinted glass, after Apple's glass "9" ----------
   Like the glass digit, the body stays clear (no milky sheen or haze): what you see
   through it is the window behind, tinted blue. Depth lives only at the edges —
   glass is thicker there, so the colour gets richer towards the rim, a dark band
   marks the thickness, and a crisp specular line catches the light top-left.
   No lens here (it warped the fill and the label). */
.lg-btn--primary .lg-btn__under[data-lens],
.lg-btn--primary .lg-btn__under[data-soft] {
  filter: none;
}

.lg-btn--primary .lg-btn__shine,
.lg-btn--primary .lg-btn__mirror {
  display: none;
}

/* Clear tinted body: transparent enough for the window to show through, no haze */
.lg-btn--primary .lg-btn__ring {
  background: rgba(48, 98, 255, 0.5);
}

.lg-btn--primary .lg-btn__glass {
  background: none;
  box-shadow:
    /* crisp specular rim: brightest top-left, softer bottom-right */
    inset 0.6px 0.6px 0 -0.1px rgba(255, 255, 255, 0.85),
    inset -0.6px -0.6px 0 -0.1px rgba(255, 255, 255, 0.45),
    /* dark line of glass thickness right under the rim */
    inset 0 0 1.5px 1px rgba(6, 16, 80, 0.55),
    /* thicker glass at the edge: richer, brighter blue that fades to clear */
    inset 0 0 7px 2px rgba(70, 125, 255, 0.75);
  transition: box-shadow 0.35s ease-out, transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1);
}

.lg-btn--primary:hover .lg-btn__glass {
  box-shadow:
    inset 0.6px 0.6px 0 -0.1px rgba(255, 255, 255, 1),
    inset -0.6px -0.6px 0 -0.1px rgba(255, 255, 255, 0.6),
    inset 0 0 1.5px 1px rgba(6, 16, 80, 0.45),
    inset 0 0 8px 2.5px rgba(95, 150, 255, 0.9);
}

/* Clear glass: the hover light is a cool edge glow, not a milky wash */
.lg-btn--primary .lg-btn__glass::before {
  background: radial-gradient(ellipse 120% 160% at var(--mx, 50%) var(--my, 60%), rgba(120, 165, 255, 0.22), transparent 70%);
}

/* The label sits on the glass surface, with a faint lift */
.lg-btn--primary .lg-btn__label {
  text-shadow: 0 0.5px 1px rgba(10, 20, 80, 0.5);
}

/* Window outline drawn along the smoothed (squircle) shape; cards.js injects the path */
.ai__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ai__outline path {
  fill: none;
  stroke: rgba(246, 233, 218, 0.1);
  stroke-width: 3.29px; /* centred stroke: the clip keeps the inner 1.645px, as in Figma */
  transition: stroke 0.4s, stroke-width 0.4s;
}

/* Focus: the window's edge lights up as soon as the field is clicked */
.ai:has(.ai__prompt:focus) .ai__outline path {
  stroke: rgba(246, 233, 218, 0.38);
}

.ai.is-red .ai__outline path {
  stroke: #f6e9da;
  stroke-width: 2px;
}

/* Red flood spreading from the Create button (cards.js sets the origin) */
.ai__flood {
  position: absolute;
  inset: -2px;
  background: #f00;
  clip-path: circle(0 at var(--fx, 85%) var(--fy, 85%));
  transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}

/* Red twins of the blue glow layers, cross-faded in on Create */
.ai__b1--red {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 266.47 228.64' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.3'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-23.074 18.875 -21.998 -25.743 250.92 18.505)'><stop stop-color='rgba(255,0,0,1)' offset='0'/><stop stop-color='rgba(255,0,0,1)' offset='0.38917'/><stop stop-color='rgba(255,31,31,1)' offset='0.46552'/><stop stop-color='rgba(255,63,63,1)' offset='0.54188'/><stop stop-color='rgba(254,125,125,1)' offset='0.69458'/><stop stop-color='rgba(254,188,188,1)' offset='0.84729'/><stop stop-color='rgba(254,250,250,1)' offset='1'/></radialGradient></defs></svg>");
}

.ai__b4--red {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 258.24 229.46' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.6'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-22.362 18.943 -21.319 -25.835 243.17 18.571)'><stop stop-color='rgba(255,0,0,1)' offset='0'/><stop stop-color='rgba(255,13,13,1)' offset='0.097292'/><stop stop-color='rgba(255,25,25,1)' offset='0.19458'/><stop stop-color='rgba(255,50,50,1)' offset='0.38917'/><stop stop-color='rgba(251,71,71,1)' offset='0.46552'/><stop stop-color='rgba(246,93,93,1)' offset='0.54188'/><stop stop-color='rgba(238,135,135,1)' offset='0.69458'/><stop stop-color='rgba(229,178,178,1)' offset='0.84729'/><stop stop-color='rgba(220,220,220,1)' offset='1'/></radialGradient></defs></svg>");
}

.ai__b1,
.ai__b4,
.ai__ghost {
  transition: opacity 0.5s;
}

.ai__b2,
.ai__b3 {
  transition: border-color 0.5s, background-color 0.5s;
}

.ai__b1--red,
.ai__b4--red {
  opacity: 0;
}

/* The devil: one cell of the emoji sheet, multiplied onto the red */
.ai__devil {
  position: absolute;
  left: 162px;
  top: 78px;
  width: 89px;
  height: 85px;
  padding: 0;
  border: 0;
  background: url("assets/glass/devil-sheet.png") no-repeat;
  background-size: 474.4px 473.2px;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  cursor: pointer;
}

.ai__devil:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

/* ----- Red state (Glass-03) ----- */

.ai.is-red .ai__flood {
  clip-path: circle(150% at var(--fx, 85%) var(--fy, 85%));
}

.ai.is-red .ai__field,
.ai.is-red .lg-btn {
  opacity: 0;
  pointer-events: none;
}

.ai.is-red .ai__ghost,
.ai.is-red .ai__b1:not(.ai__b1--red),
.ai.is-red .ai__b4:not(.ai__b4--red) {
  opacity: 0;
}

.ai.is-red .ai__b1--red {
  opacity: 0.5;
}

.ai.is-red .ai__b4--red {
  opacity: 1;
}

.ai.is-red .ai__b2 {
  border-color: #380d0d;
}

.ai.is-red .ai__b3 {
  background-color: rgba(202, 86, 88, 0.3);
}

.ai.is-red .ai__devil {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.12s 0.35s, transform 0.45s 0.35s cubic-bezier(0.34, 1.8, 0.5, 1);
}

/* Evil laugh: bobbing and shaking once the devil has arrived */
.ai.is-laughing .ai__devil {
  animation: devil-laugh 1.6s 0.2s ease-in-out infinite;
}

@keyframes devil-laugh {
  0%, 100% { transform: none; }
  8% { transform: translateY(-4px) rotate(-6deg); }
  16% { transform: translateY(0) rotate(5deg); }
  24% { transform: translateY(-4px) rotate(-5deg); }
  32% { transform: translateY(0) rotate(4deg); }
  40% { transform: translateY(-2px) rotate(-2deg); }
  50% { transform: none; }
  70% { transform: scale(1.06); }
  80% { transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .ai__flood,
  .ai.is-red .ai__devil {
    transition: none;
  }

  .ai.is-laughing .ai__devil {
    animation: none;
  }
}

/* ---------- Trade ---------- */

.trade {
  width: 271.676px;
  height: 247.304px;
  border: 0.793px solid rgba(255, 255, 255, 0.2);
  border-radius: 28.535px;
  background: rgba(14, 14, 14, 0.95);
  -webkit-backdrop-filter: blur(10.752px);
  backdrop-filter: blur(10.752px);
  overflow: hidden;
  font: 500 10.752px/normal "Wix Madefor Text", sans-serif;
  color: #fff;
  white-space: nowrap;
}

.trade > * {
  position: absolute;
  left: -0.79px;
  width: 271.676px;
}

.trade__grab {
  top: 6.38px;
  left: calc(50% - 20.43px);
  width: 40.859px;
  height: 2.867px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.trade__top {
  top: 16.41px;
  height: 37.275px;
  padding: 0 17.204px 5.735px;
  display: flex;
  align-items: center;
  gap: 14.336px;
}

.trade__seg {
  flex: 1;
  height: 31.54px;
  padding: 0 2.867px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.717px rgba(255, 255, 255, 0.14);
}

.trade__seg span {
  flex: 1;
  height: 25.806px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 12.544px;
}

.trade__seg .is-active {
  background: rgba(11, 221, 112, 0.14);
  color: rgba(11, 221, 112, 0.9);
}

.trade__select {
  width: 95.338px;
  padding: 8.602px 11.469px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0.358px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.95);
  line-height: 9.319px;
}

.trade__select img {
  width: 11.469px;
  height: 11.469px;
}

.trade__body {
  top: 96.69px;
  left: 16.41px;
  width: 237.269px;
  height: 86.736px;
}

.trade__body > * {
  position: absolute;
  left: 0;
}

.trade__label {
  top: -30.5px;
  line-height: 10.752px;
}

.trade__input {
  top: -10.04px;
  width: 237.269px;
  height: 34.408px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.trade__input span {
  position: absolute;
}

.trade__input span:first-child {
  left: 14.34px;
  top: 8.96px;
  font-size: 12.903px;
}

.trade__input span:last-child {
  left: 192.11px;
  top: 11.8px;
  line-height: 10.752px;
  opacity: 0.5;
}

.trade__slider {
  top: 35.12px;
  width: 237.269px;
  height: 18.637px;
  padding-left: 1.434px;
  cursor: pointer;
  touch-action: none; /* horizontal drags move the knob, even on touch screens */
  outline: none;
}

/* A taller hit area than the 4px track */
.trade__slider::before {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

.trade__slider:focus-visible .trade__knob {
  box-shadow: 0 0 0 2px rgba(252, 255, 63, 0.35);
}

.trade__track {
  position: absolute;
  left: 1.434px;
  right: 0;
  top: 50%;
  height: 4.301px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.trade__dots {
  position: absolute;
  left: 0;
  top: 50%;
  width: 232.251px;
  transform: translateY(-50%);
  display: flex;
  gap: 8.602px;
  overflow: hidden;
}

.trade__dots i {
  flex-shrink: 0;
  width: 1.434px;
  height: 1.434px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.trade__fill {
  position: absolute;
  left: 1.434px;
  top: 50%;
  width: 48.74px;
  height: 4.301px;
  transform: translateY(-50%);
  border-radius: 2.15px;
  background: linear-gradient(to right, #16df80, #ffd21a);
}

.trade__knob {
  position: absolute;
  left: 47.31px;
  top: 50%;
  width: 5.735px;
  height: 5.735px;
  transform: translateY(-50%);
  border: 1.434px solid rgba(252, 255, 63, 0.82);
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.trade__slider:hover .trade__knob,
.trade__slider.is-dragging .trade__knob {
  transform: translateY(-50%) scale(1.5);
}

.trade__hint {
  top: 69.51px;
  transform: translateY(-50%);
  font-size: 9.319px;
  line-height: 9.319px;
  letter-spacing: 0.0717px;
  color: rgba(235, 248, 255, 0.45);
}

.trade__hint b,
.bars__hint b {
  font-weight: inherit;
  color: #ebf8ff;
}

.trade__buy {
  top: 193.47px;
  left: calc(50% - 123.29px);
  width: 246.588px;
  height: 38.709px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.735px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset -0.717px 0 0.717px rgba(0, 0, 0, 0.5), inset 0.717px 0 0.717px rgba(255, 255, 255, 0.1), inset 0 0.717px 0.717px rgba(255, 255, 255, 0.2);
  color: #000;
  font-size: 10.752px; /* same size as "Market" */
  font-weight: 600;
  letter-spacing: -0.0719px;
}

.trade__buy img {
  width: 11.469px;
  height: 11.469px;
}

/* Hover: the button lights up (a soft white glow around it), a sheen sweeps across
   once and the arrow lifts off, as if the order is about to go. No scaling: it
   re-rasterises the label and the text jumps. */
.trade__buy {
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.35s ease-out, background-color 0.35s ease-out;
}

.trade__buy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.07) 45%, rgba(0, 0, 0, 0.07) 55%, transparent);
  transform: translateX(0);
  pointer-events: none;
}

.trade__buy:hover {
  box-shadow:
    inset -0.717px 0 0.717px rgba(0, 0, 0, 0.5),
    inset 0.717px 0 0.717px rgba(255, 255, 255, 0.1),
    inset 0 0.717px 0.717px rgba(255, 255, 255, 0.2),
    0 0 18px 2px rgba(255, 255, 255, 0.22),
    0 0 4px rgba(255, 255, 255, 0.4);
}

.trade__buy:hover::before {
  animation: trade-sheen 0.75s ease-out;
}

.trade__buy:hover img {
  animation: trade-lift 0.9s cubic-bezier(0.34, 1.6, 0.5, 1) infinite;
}

.trade__buy:active {
  background: #e9e9e9;
  transition-duration: 0.08s;
}

@keyframes trade-sheen {
  to { transform: translateX(360%); }
}

/* The arrow icon hops up and settles, over and over while hovered */
@keyframes trade-lift {
  0% { transform: translateY(0); }
  35% { transform: translateY(-2.5px); }
  60% { transform: translateY(0.6px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .trade__buy:hover::before,
  .trade__buy:hover img {
    animation: none;
  }
}

/* ---------- Risk bars ---------- */

.bars {
  width: 401px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  background: #060606;
  font: 500 13px/13px "Wix Madefor Text", sans-serif;
  color: #fff;
  white-space: nowrap;
}

.bars__head {
  position: relative;
  height: 20px;
}

.bars__head span:first-child {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 15px;
  line-height: 15px;
}

.bars__pct {
  position: absolute;
  left: 325.5px;
  top: 4px;
  font-weight: 600;
  color: #e1fd10;
}

.bars__row {
  position: relative;
  padding: 0 1px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 21px;
}

.bars__row i {
  flex-shrink: 0;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: rgba(60, 60, 67, 0.38);
}

/* The row is a slider: drag along it, click a bar, or use the arrow keys */
.bars__row {
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.bars__row::before {
  content: "";
  position: absolute;
  inset: -22px -6px -8px;
}

.bars__row i {
  transition: height 0.25s cubic-bezier(0.34, 1.5, 0.5, 1), background-color 0.25s ease-out;
}

.bars__row:focus-visible .bars__pointer {
  filter: drop-shadow(0 0 3px rgba(225, 253, 16, 0.8));
}

.bars__pct {
  transition: color 0.25s ease-out;
}

.bars__pointer {
  transition: left 0.2s cubic-bezier(0.34, 1.4, 0.5, 1);
  position: absolute;
  left: 34px;
  top: -16.56px;
  width: 13.899px;
  height: 13.899px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bars__pointer > span {
  width: 9.828px;
  height: 9.828px;
  transform: rotate(-45deg);
}

.bars__pointer img {
  inset: 8.28% 8.28% 1.37% 1.37%;
  width: 90.35%;
  height: 90.35%;
}

.bars__chips {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.bars__chips span {
  height: 30px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* Hover, like the trade card's buy button: the chip lights up with a soft glow,
   its outline brightens and a sheen sweeps across once (light, on the dark chip) */
.bars__chips span {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.35s ease-out, box-shadow 0.35s ease-out, background-color 0.35s ease-out;
}

.bars__chips span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.16) 55%, transparent);
  pointer-events: none;
}

.bars__chips span:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 14px 1px rgba(255, 255, 255, 0.14), inset 0 0 6px rgba(255, 255, 255, 0.08);
}

.bars__chips span:hover::before {
  animation: chip-sheen 0.7s ease-out;
}

.bars__chips span:active {
  background-color: rgba(255, 255, 255, 0.12);
  transition-duration: 0.08s;
}

@keyframes chip-sheen {
  to { transform: translateX(270%); }
}

@media (prefers-reduced-motion: reduce) {
  .bars__chips span:hover::before {
    animation: none;
  }
}

.bars__hint {
  letter-spacing: 0.1px;
  color: rgba(235, 248, 255, 0.45);
}

/* ---------- Margin ---------- */

.margin {
  width: 393px;
  height: 316px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 32px;
  overflow: hidden;
  font: 500 14px/24px "Manrope", sans-serif;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.margin > * {
  position: absolute;
  left: 21px;
  width: 349px;
}

.margin__info {
  top: 23px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.margin__head {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5.421px;
  color: #fff;
}

.margin__head span,
.margin__rows span {
  flex: 1;
}

.margin__head b,
.margin__rows b {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.25px;
}

.margin__control {
  position: relative;
  margin-bottom: -10px;
  padding: 3px;
  display: flex;
  gap: 4px;
  border: 1px solid rgba(240, 94, 85, 0.1);
  border-radius: 8px;
}

.margin__control > i,
.margin__call {
  display: block;
  height: 30px;
  flex-shrink: 0;
}

.margin__call {
  position: relative;
  width: 52px;
  overflow: hidden;
  border-radius: 5px 2px 2px 5px;
}

.margin__call > i {
  position: absolute;
  left: 0;
  top: 0;
  width: 105px;
  height: 30px;
  background: #ff615a;
}

.margin__pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 30px;
}

.margin__pattern > img {
  inset: -26.67% -102.12% -19.28% -26.41%;
  width: 228.53%;
  height: 145.95%;
}

.margin__spacer {
  width: 2px;
  border-radius: 1px;
  background: #ff1;
}

.margin__used {
  width: 221px;
  border-radius: 2px;
  background: rgba(42, 163, 255, 0.2);
}

.margin__avail {
  width: 56px;
  border-radius: 2px 5px 5px 2px;
  background: #2be6ff;
}

.margin__glow {
  position: absolute;
  left: -1px;
  top: -69px;
  height: 101px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.margin__glow i {
  height: 94px;
  border-radius: 5px;
  filter: blur(12px);
  opacity: 0.2;
}

.margin__rows {
  margin: 0;
  padding: 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.margin__rows li {
  display: flex;
  align-items: center;
  gap: 5.421px;
}

.margin__rows img {
  width: 9.035px;
  height: 9.035px;
  transform: scaleY(-1);
}

.margin__rows small {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.25px;
}

.margin__divider {
  top: 241px;
  height: 1px;
}

.margin__actions {
  top: 257px;
  display: flex;
  gap: 16px;
}

.margin__actions span {
  flex: 1;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
}

.margin__actions img {
  width: 12px;
  height: 12px;
}

/* ---------- Withdraw ---------- */

.withdraw {
  width: 157.285px;
  height: 162.359px;
  border-radius: 33.825px; /* cards.js turns this into Figma's 80% corner smoothing */
  overflow: hidden;
  background: rgba(55, 55, 55, 0.4);
  -webkit-backdrop-filter: blur(4.228px);
  backdrop-filter: blur(4.228px);
  box-shadow: inset 0 1.691px 10.147px rgba(255, 255, 255, 0.05), inset 0 3.382px 6.765px rgba(255, 255, 255, 0.1), inset 0 1.691px 33.825px 13.53px rgba(255, 255, 255, 0.05);
  font-family: "Geist", sans-serif;
}

.withdraw > * {
  position: absolute;
}

.withdraw__glow {
  left: -1.69px;
  top: 120.92px;
  width: 50.737px;
  height: 44.818px;
}

.withdraw__glow > img {
  inset: -113.21% -100%;
  width: 300%;
  height: 326.42%;
}

.withdraw__icon {
  left: 6.76px;
  top: 6.76px;
  width: 50.737px;
  height: 50.737px;
}

.withdraw__sum {
  left: 16.91px;
  top: 64.27px;
  width: 135px;
  /* sized so the amount spans exactly the progress bar: equal margins left and right */
  font-size: 25.73px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}

.withdraw__note {
  left: 16.91px;
  top: 99.78px;
  font-size: 10.993px;
  line-height: 13.53px;
  color: rgba(255, 255, 255, 0.55);
}

.withdraw__progress {
  left: 16.91px;
  top: 140.37px;
  width: 123.461px;
  display: flex;
  gap: 3.382px;
}

.withdraw__progress i {
  height: 6.765px;
}

.withdraw__progress i:first-child {
  width: 49.892px;
  border-radius: 6.765px 1.691px 1.691px 6.765px;
  background: linear-gradient(to right, #0cc44d, #8ee29c);
  box-shadow: 0 6.765px 10.147px rgba(138, 223, 154, 0.24);
}

/* The green part breathes: it brightens and glows, and the light it casts on the
   card (.withdraw__glow) swells with it */
.withdraw__progress i:first-child {
  animation: withdraw-pulse 2.4s ease-in-out infinite;
}

.withdraw__glow {
  animation: withdraw-glow 2.4s ease-in-out infinite;
}

@keyframes withdraw-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 6.765px 10.147px rgba(138, 223, 154, 0.24);
  }
  50% {
    filter: brightness(1.25) saturate(1.15);
    box-shadow: 0 6.765px 10.147px rgba(138, 223, 154, 0.24), 0 0 9px 1px rgba(90, 230, 130, 0.55);
  }
}

@keyframes withdraw-glow {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .withdraw__progress i:first-child,
  .withdraw__glow {
    animation: none;
  }
}

.withdraw__progress i:last-child {
  flex: 1;
  border-radius: 1.691px 6.765px 6.765px 1.691px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.18), rgba(153, 153, 153, 0.18));
  box-shadow: 0 6.765px 10.147px rgba(255, 255, 255, 0.08);
}

/* ---------- Streak ---------- */

.streak {
  --streak: #83ff33;
  width: 215.536px;
  height: 248.696px;
  border-radius: 33.159px; /* cards.js turns this into Figma's 80% corner smoothing */
  background: var(--streak);
  overflow: hidden;
  color: #000;
  transition: background-color 0.45s ease-out;
}

.streak > * {
  position: absolute;
}

.streak__label {
  left: 50%;
  transform: translate(-50%, -50%);
  font: 400 19.896px/normal "Lebowski", "Host Grotesk", sans-serif;
  white-space: nowrap;
}

/* Centred, so 100+ days stay in the middle too */
.streak__num {
  --bump: 1.1;   /* peak scale, set per click by cards.js: faster clicks jump higher */
  --lift: -62%;
  left: 50%;
  top: 115.44px;
  transform: translate(-50%, -50%);
  padding-left: 2.3212px; /* balances the tracking after the last digit */
  font: 500 46.423px/normal "Atkinson Hyperlegible Mono", monospace;
  letter-spacing: -2.3212px;
}

.streak__num.is-bump {
  animation: streak-bump 0.45s cubic-bezier(0.34, 1.8, 0.5, 1);
}

@keyframes streak-bump {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, var(--lift)) scale(var(--bump)); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.streak__plus {
  left: 89.53px;
  top: 192.32px;
  width: 36.475px;
  height: 36.475px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  /* a darker shade of the card, whatever colour it has */
  background: #43aa00;
  background: color-mix(in oklab, var(--streak) 62%, #000);
  cursor: pointer;
  transition: background-color 0.45s ease-out, transform 0.3s cubic-bezier(0.34, 1.8, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}

.streak__plus svg {
  width: 13.264px;
  height: 13.264px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.66;
  stroke-linecap: round;
}

.streak__plus:hover {
  transform: scale(1.08);
}

.streak__plus:active {
  transform: scale(0.92);
  transition-duration: 0.08s;
}

.streak__plus:focus-visible {
  outline: 1.5px solid #000;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .streak__num.is-bump {
    animation: none;
  }
}

/* ---------- Wolves ---------- */

.wolves {
  width: 322px;
  height: 395.092px;
  border-radius: 39.509px; /* cards.js turns this into Figma's 80% corner smoothing */
  background: #83ff33;
  overflow: hidden;
}

.wolves img {
  position: absolute;
  left: -37.53px;
  top: 0;
  width: 395.092px;
  height: 395.092px;
  object-fit: cover;
}

/* ---------- Finance widgets: Money and To Do (Figma "Test", 35:674) ---------- */

.fin-label {
  font: 400 14.355px/normal "Geist", sans-serif;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.fin-amount {
  font: 400 28.71px/normal "Geist", sans-serif;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fin-dim {
  opacity: 0.5;
}

/* The card glass (Figma GLASS, light angle 0, intensity .8). The lens itself is an SVG
   filter on the __under layer (cards.js); this layer adds what light does on the glass:
   the dark hairline, the faint radial sheen, specular light catching the rim — brightest
   at the top corners, softer at the bottom ones — and the thin light line at the bottom. */
.money__glass,
.todo__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(100% 100% at 50% 0%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 71%, rgba(255, 255, 255, 0.01));
  /* the dark hairline sits outside, like Figma's OUTSIDE stroke */
  box-shadow: 0 0 0 var(--hairline, 0.798px) rgba(16, 16, 16, 0.8), inset 0 -1.595px 1.595px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.money__glass::after,
.todo__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* Specular light on the rim: hot at the two top corners, a faint line between them,
     almost nothing down the sides, a little again at the bottom corners */
  background:
    radial-gradient(46px 56px at 0 0, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 45%, transparent 75%),
    radial-gradient(46px 56px at 100% 0, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 45%, transparent 75%),
    radial-gradient(40px 40px at 0 100%, rgba(255, 255, 255, 0.22), transparent 75%),
    radial-gradient(40px 40px at 100% 100%, rgba(255, 255, 255, 0.22), transparent 75%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent 12%);
  background-origin: border-box;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Light the glass gathers inside the rim: a soft top sheen and the coloured glow
   of what lies under the bottom edge (green under Money, gold under To Do) */
.money__glass::before,
.todo__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* gradients, not inset shadows: a blurred inset shadow leaks up the sides too */
  background:
    linear-gradient(to top, var(--edge-glow), transparent 9px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent 3px);
}

.money__glass { --edge-glow: transparent; }

/* Money's bottom band: green light gathered along the bottom rim. An inset shadow cast
   from below follows the card's smoothed corners, so the band's top edge rises along
   them — the edge distortion of Figma's glass. It sits on the glass, not under the
   lens: bent by the lens, a coloured edge splits into a teal stripe. (The exported
   base shelf drew a flat, straight edge here instead.) */
.money__glass::before {
  /* the green bottom is built in layers by .money__shelf; here only the top sheen
     and the rim's own bottom line */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent 3px);
  /* soft band, then the rim catching light along the bottom — as a blurred inset
     shadow it follows the smoothed corners and fades up them (the rim ring above is
     a rectangle cut-out, which thickens at the corners and steps where they end) */
  /* soft inward fade, not a crisp line: in Figma the bottom rim melts into the glass */
  box-shadow: inset 0 -1.5px 3.5px -0.5px rgba(205, 242, 210, 0.3);
}

/* Money's bottom reflection, layered as in Figma (measured from its render, centre
   column, from the top down):
   - dark until ~37px above the bottom, then green rising softly
   - a green peak about 10px above the bottom edge
   - a lighter rim line at the very bottom
   (Figma also has a darker olive band under the peak; drawn here it read as hard
   dark stripes along the corners, so it's left out.)
   The peak and the rim are inset shadows on a card-shaped layer,
   so their boundaries follow the smoothed corners and rise along them, like the
   curve in Figma. */
/* No crisp specular dots at Money's bottom corners either */
.money .money__glass::after {
  background:
    radial-gradient(46px 56px at 0 0, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 45%, transparent 75%),
    radial-gradient(46px 56px at 100% 0, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 45%, transparent 75%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent 12%);
  background-origin: border-box;
  background-repeat: no-repeat;
}

.money__shelf {
  inset: 0 0 3px; /* lifted 3px: a dark gap between the glow and the card's rim line */
  border-radius: inherit;
  box-shadow:
    inset 0 -1.2px 1px rgba(56, 100, 58, 0.75),
    inset 0 -13px 5px -2px rgba(34, 86, 54, 0.9);
  /* the soft rise above the peak is a gradient: as a big blurred inset shadow it
     climbed green up the card's sides, which Figma doesn't have */
  background: linear-gradient(to top, rgba(30, 74, 46, 0.85), rgba(28, 66, 42, 0.5) 16px, rgba(22, 50, 32, 0.22) 26px, transparent 38px);
  /* the glow's lower edge fades out over a few px instead of stopping sharply,
     along the corners too (the blur) and across the bottom (the mask) */
  filter: blur(1.2px);
  -webkit-mask: linear-gradient(to top, transparent, #000 5px);
  mask: linear-gradient(to top, transparent, #000 5px);
  pointer-events: none;
}

.todo__glass { --edge-glow: rgba(230, 203, 127, 0.5); }

/* Everything the glass refracts. Opaque, so the lens has real pixels to bend. */
.money__under,
.todo__under {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg, #070707);
}

.money {
  width: 300px;
  height: 319px;
  border-radius: 31.9px;
  overflow: hidden;
}

.money > *,
.money__under > *,
.todo > *,
.todo__card > *,
.todo__under > * {
  position: absolute;
}

/* Under Figma's glass the base shelf keeps its shape but loses the hard edge */
/* Its flat shelf would draw a straight edge across the band, so Money uses only the
   glass's bottom band (.money__glass::before) */
.money .money__base {
  display: none;
  left: 5.58px;
  top: 253.61px;
  width: 289.491px;
  height: 51.187px;
}

.money__glow {
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300.66 319' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='100%' height='100%' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-29.268 31.9 -30.066 -27.585 300.66 0)'><stop stop-color='rgba(14,14,14,0)' offset='0'/><stop stop-color='rgba(0,0,0,0.2)' offset='0.65'/><stop stop-color='rgba(19,64,26,0.275)' offset='0.7375'/><stop stop-color='rgba(37,128,52,0.35)' offset='0.825'/><stop stop-color='rgba(56,191,78,0.425)' offset='0.9125'/><stop stop-color='rgba(74,255,104,0.5)' offset='1'/></radialGradient></defs></svg>") 0 0 / 100% 100%;
  filter: blur(31.9px);
  opacity: 0.2;
}

.money__chart {
  left: -6.38px;
  top: 160.7px;
  width: 310.228px;
  height: 187.811px;
}

.money__chart img,
.money__area {
  position: absolute;
  inset: -0.85% -0.51%;
  width: auto;
  height: auto;
}

/* The chart line is glass in Figma: a saturated green that glows onto the card */
.money__chart img {
  filter: saturate(1.35) drop-shadow(0 0 5px rgba(85, 255, 142, 0.45));
}

/* The area under the line (its Figma fill; the SVG export dropped it) */
.money__area {
  clip-path: path("M1.595 97.4562H20.8406C29.9115 97.4562 34.4469 97.4562 38.6192 96.2852C39.9989 95.898 41.3397 95.4179 42.629 94.8495C46.5281 93.1305 49.6897 90.3746 56.0128 84.8628L74.8111 68.4764C81.1341 62.9647 84.2958 60.2087 88.1948 58.4897C89.4841 57.9213 90.825 57.4412 92.2046 57.054C96.3769 55.883 100.912 55.883 109.983 55.883H111.742C120.788 55.883 125.311 55.883 129.473 54.718C130.85 54.3327 132.188 53.855 133.475 53.2894C137.366 51.5789 140.526 48.836 146.844 43.3506L155.218 36.0811C161.537 30.5954 164.696 27.8525 168.587 26.142C169.874 25.5764 171.212 25.0987 172.589 24.7134C176.751 23.5484 181.274 23.5484 190.32 23.5484H211.634C216.049 23.5484 218.257 23.5484 220.411 23.8425C221.883 24.0436 223.334 24.3468 224.748 24.7491C226.816 25.3375 228.771 26.2076 232.68 27.9476C245.88 33.8238 252.481 36.7619 259.08 36.8093C263.535 36.8412 267.931 35.9471 271.884 34.2052C286.023 27.974 298.514 10.7532 311.823 1.595V189.406H1.595Z");
  background: linear-gradient(to bottom, rgba(106, 237, 147, 0.18), rgba(60, 135, 84, 0) 45%);
  opacity: 0.6;
}

.money__title {
  left: 0;
  top: 25.52px;
  padding: 0 19.14px;
  display: flex;
  flex-direction: column;
  gap: 6.38px;
}

.money__figures {
  display: flex;
  flex-direction: column;
  gap: 0.798px;
}

.money__delta {
  display: flex;
  align-items: center;
  font: 400 14.355px/normal "Geist", sans-serif;
  color: #00e029;
  opacity: 0.8;
}

.money__delta img {
  width: 15.95px;
  height: 15.95px;
}

.money__info {
  left: 259.19px;
  top: 22.33px;
  width: 19.14px;
  height: 19.14px;
  opacity: 0.5;
}

.money__timeline {
  left: calc(50% + 0.33px);
  top: 274.34px;
  width: 262.378px;
  transform: translateX(-50%);
  display: flex;
}

.money__timeline span {
  flex: 1;
  text-align: center;
  font: 600 9.57px/12.76px -apple-system, "SF Pro Text", "Geist", sans-serif;
  color: #fff;
}

/* ---------- Chart indicator ----------
   One point on the line, at (--px, --py) in card px, moved by cards.js as you hover,
   drag or use the arrow keys. At rest it is a plain ring; while you interact it turns
   into the glass bead with its guide lines (dashed above, solid below). */
.money__pointer {
  --px: 172.26px;
  --py: 183.42px;
  inset: 0;
  pointer-events: none;
}

.money__pointer > * {
  position: absolute;
}

.money__guide {
  left: calc(var(--px) - 0.8px);
  width: 1.6px;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.money__guide--top {
  top: 116.43px;
  height: max(0px, calc(var(--py) - 16px - 2px - 116.43px));
  background: radial-gradient(circle, rgba(91, 247, 142, 0.5) 0.75px, transparent 0.85px) 0 100% / 1.6px 5.76px repeat-y;
  -webkit-mask: linear-gradient(to top, #000, transparent);
  mask: linear-gradient(to top, #000, transparent);
}

.money__guide--bottom {
  top: calc(var(--py) + 16px);
  height: max(0px, calc(277.5px - var(--py) - 16px));
  background: linear-gradient(to bottom, rgba(90, 251, 143, 0.5), rgba(90, 251, 143, 0.5) 40%, rgba(255, 255, 255, 0));
}

/* Resting state: a light ring sitting on the line, with the line's glow under it */
.money__ring {
  left: calc(var(--px) - 8.5px);
  top: calc(var(--py) - 8.5px);
  width: 17px;
  height: 17px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3.4px solid #d9d9d9;
  background: #000;
  box-shadow: 0 0 12px 5px rgba(74, 255, 104, 0.16);
  transition: opacity 0.25s ease-out, transform 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

/* The glass bead (Figma GLASS, refraction .68): a little lens over the chart. Inside it
   copies of the chart are magnified about its centre and squeezed at the rim, so the
   line swells and bends like through a drop of water; the surface adds the light. */
.money__bead {
  left: calc(var(--px) - 15.95px);
  top: calc(var(--py) - 15.95px);
  width: 31.9px;
  height: 31.9px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease-out, transform 0.5s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.money[data-active] .money__guide,
.money[data-active] .money__bead {
  opacity: 1;
}

.money[data-active] .money__bead {
  transform: none;
}

.money[data-active] .money__ring {
  opacity: 0;
  transform: scale(1.6);
}

.money__bead > * {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Opaque, so it hides the line beneath; the copies inside show it refracted */
.money__bead-lens,
.money__bead-rim {
  overflow: hidden;
}

.money__bead-lens {
  background: var(--bg, #060606);
}

/* Chart copies placed exactly over the chart below (card → bead coordinates,
   following --px / --py).
   The middle sees it magnified; the rim sees it squeezed and shifted, which is
   what makes a glass bead read as glass: the line breaks and bends at the edge. */
.money__bead img {
  position: absolute;
  left: calc(7.99px - var(--px));
  top: calc(175.05px - var(--py));
  width: 313.418px;
  height: 191.001px;
  transform-origin: calc(var(--px) + 7.96px) calc(var(--py) - 159.1px);
}

.money__bead-lens img {
  transform: scale(1.5);
  filter: saturate(1.35) drop-shadow(0 0 4px rgba(85, 255, 142, 0.5));
}

.money__bead-rim {
  -webkit-mask: radial-gradient(circle closest-side, transparent 55%, #000 92%);
  mask: radial-gradient(circle closest-side, transparent 55%, #000 92%);
  background: var(--bg, #060606);
}

.money__bead-rim img {
  transform: translateY(-1.2px) scale(0.82);
  filter: saturate(1.3) drop-shadow(0.7px 0 0 rgba(255, 60, 120, 0.55)) drop-shadow(-0.7px 0 0 rgba(60, 140, 255, 0.55));
}

/* The glass surface: dark hairline, thick-glass edge, a darker lower half,
   a bright specular crescent top-left and the caustic glow inside the bottom rim */
.money__bead-glass {
  background:
    radial-gradient(42% 20% at 40% 14%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 100%),
    radial-gradient(70% 40% at 50% 92%, rgba(130, 255, 170, 0.28), rgba(130, 255, 170, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(2, 18, 8, 0.45));
  box-shadow:
    0 0 0 0.24px rgba(0, 0, 0, 0.6),
    0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 0 0 0.6px rgba(225, 240, 230, 0.4),
    inset 0.8px 1px 1px rgba(255, 255, 255, 0.7),
    inset -0.6px -1px 1.2px rgba(150, 255, 185, 0.45),
    inset 0 0 5px 1.5px rgba(0, 0, 0, 0.35);
}

/* ---------- Money intro: numbers count up, the line draws itself, the bead lands ---------- */

/* Leading glow riding the tip of the line while it draws (placed by cards.js) */
.money__head {
  position: absolute;
  left: -6.38px; /* the chart box's origin; cards.js moves it along the line */
  top: 160.7px;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 255, 235, 0.95) 0 9%, rgba(110, 255, 150, 0.55) 22%, rgba(85, 255, 142, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.money__chart {
  --draw: 1;
  clip-path: inset(-20px calc((1 - var(--draw)) * 100%) -20px -20px);
}

/* Until the line has drawn itself the indicator is hidden; then the ring pops in */
.money__pointer {
  transition: opacity 0.4s ease-out, transform 0.6s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.money[data-intro="wait"] .money__pointer {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: var(--px) var(--py);
  transition: none;
}

/* The chart is a control: horizontal drags move the indicator, vertical ones scroll */
.money {
  touch-action: pan-y;
  cursor: default;
}

.money[data-active] {
  cursor: ew-resize;
}

.money:focus-visible {
  outline: 1px solid rgba(91, 247, 142, 0.6);
  outline-offset: 3px;
}

/* To Do: the card with two receding plates behind it (a stack of tasks) */
.todo {
  width: 306px;
  height: 308px;
}

.todo__plate {
  border-radius: 21.802px;
}

.todo__plate--back {
  left: 32.7px;
  top: 259.28px;
  width: 240.595px;
  height: 33.481px;
  opacity: 0.7;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(153, 153, 153, 0) 96.5%);
}

.todo__plate--mid {
  left: 18.69px;
  top: 225.8px;
  width: 268.626px;
  height: 60.733px;
  border-radius: 26px;
  opacity: 0.8;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.3), transparent);
}

.todo__card {
  left: 6.23px;
  top: 15.57px;
  width: 293.542px;
  height: 264.733px;
  border-radius: 31.145px;
  overflow: hidden;
}

.todo__base {
  left: 50%;
  bottom: 13.85px;
  width: 293.541px;
  height: 49.976px;
  transform: translateX(-50%);
}

.todo__glow {
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 293.54 264.73' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='100%' height='100%' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 33.687 -37.353 0 147.16 0)'><stop stop-color='rgba(11,1,2,1)' offset='0'/><stop stop-color='rgba(0,0,0,1)' offset='0.65'/><stop stop-color='rgba(7,6,4,0.98438)' offset='0.66094'/><stop stop-color='rgba(14,13,8,0.96875)' offset='0.67187'/><stop stop-color='rgba(29,25,16,0.9375)' offset='0.69375'/><stop stop-color='rgba(58,51,32,0.875)' offset='0.7375'/><stop stop-color='rgba(86,76,48,0.8125)' offset='0.78125'/><stop stop-color='rgba(115,102,64,0.75)' offset='0.825'/><stop stop-color='rgba(173,152,95,0.625)' offset='0.9125'/><stop stop-color='rgba(230,203,127,0.5)' offset='1'/></radialGradient></defs></svg>") 0 0 / 100% 100%;
  filter: blur(31.145px);
}

.todo__glass {
  --hairline: 0.779px;
}

/* ---------- To Do as thick glass (Figma GLASS; static, no animation) ----------
   Built from how real glass reads (see the liquid-glass-logo skill's optics notes):
   - a thick bevel: light gathered just inside the left, right and top edges
   - a split rim: a warm outer line and a cool inner line, without tinting the content
   - the bottom rim lit by the gold glow under it
   - the inner face of the bevel, a few px inside the rim (kept off the text):
     only its upper-left and lower-right arcs catch light, plus a caustic where
     the light focuses along the bottom
   Inset shadows with a negative spread carry each side's light round the smoothed
   corners, which is what makes the edge read as one curved piece of glass. */
.todo .todo__glass {
  box-shadow:
    0 0 0 var(--hairline) rgba(16, 16, 16, 0.8),
    inset 0 0 0 0.6px rgba(255, 214, 170, 0.32),
    inset 0 0 0 1.5px rgba(140, 200, 255, 0.06),
    inset 0 1.2px 0.8px rgba(255, 255, 255, 0.42),
    inset 8px 0 10px -7px rgba(255, 255, 255, 0.12),
    inset -8px 0 10px -7px rgba(255, 255, 255, 0.08),
    inset 0 11px 12px -10px rgba(255, 255, 255, 0.16),
    inset 0 -15px 15px -9px rgba(230, 203, 127, 0.32),
    inset 0 -1.2px 1px rgba(255, 236, 205, 0.55);
}

.todo__wall {
  inset: 5px;
  border-radius: 26px;
  padding: 0.8px;
  pointer-events: none;
  background: conic-gradient(
    transparent 0deg,
    transparent 100deg,
    rgba(255, 232, 190, 0.18) 135deg,
    transparent 170deg,
    transparent 280deg,
    rgba(255, 255, 255, 0.22) 315deg,
    transparent 350deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Money gets the same glass, lit green from below instead of gold. It reuses the
   inner-face arcs (.todo__wall), sized to its own corners. */
.money .money__glass {
  /* the warm rim line runs along the top and sides only: in Figma the bottom edge has
     no crisp line, it melts inward (see .money__glass::before) */
  box-shadow:
    0 0 0 0.798px rgba(16, 16, 16, 0.8),
    inset 0.6px 0 0 rgba(255, 214, 170, 0.32),
    inset -0.6px 0 0 rgba(255, 214, 170, 0.32),
    inset 0 0.6px 0 rgba(255, 214, 170, 0.32),
    inset 0 0 0 1.5px rgba(140, 200, 255, 0.06),
    inset 0 1.2px 0.8px rgba(255, 255, 255, 0.42),
    inset 8px 0 10px -7px rgba(255, 255, 255, 0.12),
    inset -8px 0 10px -7px rgba(255, 255, 255, 0.08),
    inset 0 11px 12px -10px rgba(255, 255, 255, 0.16);
}

/* The caustic: light focused through the curved channel along the bottom wall */
.todo__card::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 14px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 225, 0.55), rgba(240, 210, 140, 0.18) 55%, transparent);
  filter: blur(0.6px);
  pointer-events: none;
}

/* The plates behind are glass too: solid grey bodies, a lit top edge, a dark lip */
.todo .todo__plate {
  opacity: 1;
  box-shadow:
    inset 0 0.8px 0.6px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    inset 6px 0 8px -6px rgba(255, 255, 255, 0.12),
    inset -6px 0 8px -6px rgba(255, 255, 255, 0.1),
    0 3px 8px rgba(0, 0, 0, 0.45);
}

.todo .todo__plate--mid {
  background: linear-gradient(to bottom, #8a8a8e, #55555a 75%);
}

.todo .todo__plate--back {
  background: linear-gradient(to bottom, #66666a, #3d3d41 75%);
}

.todo__name {
  left: 18.69px;
  top: 24.92px;
}

.todo__title {
  left: 0;
  top: 65.4px;
  padding: 0 18.687px;
  display: flex;
  flex-direction: column;
  gap: 3.115px;
}

.todo__action {
  left: 18.69px;
  top: 223.47px;
  width: 256.168px;
  display: flex;
  align-items: center;
  gap: 6.229px;
  font: 400 14.015px/normal "Geist", sans-serif;
  color: #ea8313;
}

.todo__action img {
  width: 18.687px;
  height: 18.687px;
}

/* Figma corner smoothing 80% */
@supports (corner-shape: superellipse(2)) {
  .money,
  .money__glass,
  .money__glass::before,
  .money__glass::after,
  .money__shelf,
  .money__under {
    border-radius: 57.42px;
    corner-shape: superellipse(1.96);
  }

  .todo__card,
  .todo__glass,
  .todo__glass::before,
  .todo__glass::after,
  .todo__under {
    border-radius: 56.06px;
    corner-shape: superellipse(1.96);
  }

  .todo__wall {
    border-radius: 47px;
    corner-shape: superellipse(1.96);
  }

  .money__wall {
    border-radius: 48px;
  }
}

/* ---------- Opus: glass bow and iPad (Figma Desktop 10–12) ---------- */

/* Hard light against the page, as in Figma: it needs .viewport's background behind it */
.bow {
  width: 534px;
  height: 257px;
  mix-blend-mode: hard-light;
}

.bow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The box is the device; the picture also holds its shadow, so it hangs past the box */
.ipad {
  width: 633.4px;
  height: 488px;
}

.ipad img {
  position: absolute;
  left: -91.98px;
  top: -73.26px;
  width: 887.246px;
  height: 706.511px;
  max-width: none;
}

/* Photo card after the iPad (Figma Desktop 13) */
.girl {
  width: 453px;
  height: 334px;
  border-radius: 80px; /* cards.js turns this into Figma's 80% corner smoothing */
  overflow: hidden;
}

.girl img {
  width: 100%;
  height: 100%;
}

@media (max-width: 1023px) {
  .bow,
  .ipad {
    align-self: center;
  }
}