.free-cards {
 --base-reset: #f0f2f5;
 --half-focus: #8d94a1;
 --custom-view: #e7e9ee;
 --round-screen: #0c0e12;
 --native-cliff: #ffffff;
 --sharp-window: #f6f7f9;
 --deep-oak: #5b6270
}

.free-cards .smart-stone {
 min-width: 0;
 align-self: start;
 display: flex;
 flex-direction: column;
 top: calc(var(--base-helpers) + 20px);
 gap: 20px;
 position: sticky
}

.free-cards .simple-root {
 position: static;
 align-self: stretch;
 top: auto;
 width: 100%
}

.free-cards .front-tracker {
 padding: 0;
 border-bottom: 0;
 background: #0000
}

.free-cards .metro-lens {
 max-width: none;
 padding: 4px 0;
 counter-reset: stepc;
 display: grid;
 gap: 0;
 margin: 0;
 position: relative
}

.free-cards .snap-elements {
 left: 16px;
 right: auto;
 top: 22px;
 bottom: 22px;
 width: 2px;
 border-radius: 2px;
 height: auto;
 transform: none;
 background: var(--custom-view)
}

.free-cards .snap-elements:after {
 width: 100%;
 transition: height 450ms cubic-bezier(.2, .7, .3, 1);
 height: var(--front-iron, 0%);
 background: var(--round-screen);
 border-radius: 2px
}

.free-cards .royal-pier {
 align-items: center;
 counter-increment: stepc;
 display: grid;
 min-width: 0;
 padding: 9px 0;
 flex-direction: row;
 gap: 12px;
 grid-template-columns: 34px minmax(0, 1fr)
}

.free-cards .upper-net {
 transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
 border-radius: 999px;
 border: 2px solid var(--custom-view);
 width: 34px;
 color: var(--half-focus);
 height: 34px;
 font-size: 13px;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 place-items: center;
 background: var(--native-cliff);
 display: grid
}

.free-cards .upper-net i {
 display: none
}

.free-cards .upper-net:before {
 content: counter(stepc)
}

.free-cards .royal-pier.classic-reset .upper-net {
 background: var(--round-screen);
 color: #ffffff;
 border-color: var(--round-screen)
}

.free-cards .royal-pier.long-port .upper-net {
 border-color: var(--round-screen);
 color: var(--round-screen);
 background: var(--native-cliff)
}

.free-cards .royal-pier.long-port .upper-net:before {
 content: "\2713";
 font-size: 14px
}

.free-cards .main-oak {
 overflow-wrap: anywhere;
 display: block;
 min-width: 0;
 color: var(--half-focus);
 text-align: left;
 transition: color 200ms ease;
 font-size: 13px;
 font-weight: bold;
 line-height: 1.25
}

.free-cards .classic-reset.royal-pier .main-oak {
 color: var(--round-screen)
}

.free-cards .royal-pier.long-port .main-oak {
 color: var(--deep-oak)
}

.free-cards .long-insights {
 border: 1px solid var(--custom-view);
 border-radius: 16px;
 box-shadow: none;
 background: var(--native-cliff)
}

.free-cards .full-chain {
 padding: 14px 16px;
 border-bottom: 1px solid var(--base-reset)
}

.free-cards .neat-layout {
 text-transform: uppercase;
 color: var(--half-focus);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: .1em
}

.free-cards .neat-layout i {
 display: none
}

.free-cards .low-dew {
 border-bottom: 1px solid var(--base-reset);
 padding: 12px 16px
}

.free-cards .vivid-index {
 color: var(--half-focus);
 letter-spacing: .1em;
 font-size: 9.5px;
 margin-bottom: 4px
}

.free-cards .fluid-chrome {
 font-size: 14px;
 font-weight: bold;
 color: var(--round-screen)
}

.free-cards .quick-scope {
 font-size: 11px;
 font-weight: bold;
 text-transform: none;
 color: var(--deep-oak);
 letter-spacing: 0
}

.free-cards .quick-scope:hover {
 color: var(--round-screen)
}

.free-cards .local-panel[data-stage="4"] .solid-kit:has( > #polar-shade[hidden]) {
 grid-template-columns: minmax(0, 1fr)
}

.free-cards .back-ribbon {
 border: 1px solid var(--custom-view);
 border-radius: 16px;
 box-shadow: none
}

.free-cards .native-elm {
 letter-spacing: -.02em;
 color: var(--round-screen);
 font-size: 22px;
 font-weight: 800
}

.free-cards .native-elm i {
 display: none
}

.free-cards .pure-forest {
 color: var(--deep-oak);
 font-size: 14px;
 line-height: 1.5
}

.free-cards .west-olive {
 border: 0;
 border-left: 2px solid var(--round-screen);
 border-radius: 0 10px 10px 0;
 background: var(--sharp-window)
}

.free-cards .active-footer {
 letter-spacing: .1em;
 padding: 0;
 background: none;
 color: var(--half-focus);
 font-size: 9.5px;
 font-weight: 800;
 text-transform: uppercase
}

.free-cards .native-matrix {
 color: var(--deep-oak);
 font-size: 13px
}

.free-cards .core-sun {
 background: var(--native-cliff);
 transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
 color: var(--deep-oak);
 font-weight: bold;
 border: 1px solid var(--custom-view);
 border-radius: 12px
}

.free-cards .core-sun:hover {
 border-color: var(--half-focus)
}

.free-cards .core-sun.classic-reset {
 background: var(--round-screen);
 color: #ffffff;
 border-color: var(--round-screen)
}

.free-cards .core-sun.classic-reset .lower-rain,
.free-cards .classic-reset.core-sun .soft-utils {
 color: rgba(255, 255, 255, .75)
}

.free-cards .classic-reset.open-slope.core-sun {
 border-color: var(--round-screen);
 background: var(--sharp-window);
 box-shadow: 0 0 0 1px var(--round-screen) inset;
 color: var(--round-screen)
}

.free-cards .open-slope.classic-reset.core-sun .lower-rain {
 color: var(--deep-oak)
}

.free-cards .core-sun.open-slope.classic-reset .soft-utils {
 color: var(--round-screen)
}

.free-cards .open-slope.core-sun.classic-reset i {
 color: var(--round-screen)
}

.free-cards .mono-peak {
 font-weight: 800;
 border-radius: 12px;
 letter-spacing: .01em
}

.free-cards .back-root {
 background: var(--round-screen);
 border-color: var(--round-screen);
 color: #ffffff
}

.free-cards .back-root:hover:not(:disabled) {
 background: #22262e;
 border-color: #22262e
}

.free-cards .crisp-insights,
.free-cards .snap-iron {
 border: 1px solid var(--custom-view);
 background: var(--native-cliff);
 color: var(--round-screen)
}

.free-cards .crisp-insights:hover:not(:disabled),
.free-cards .snap-iron:hover:not(:disabled) {
 border-color: var(--round-screen)
}

.free-cards .lower-fleet,
.free-cards .inner-runtime {
 color: var(--round-screen);
 font-weight: 600;
 border: 1px solid var(--custom-view);
 border-radius: 12px
}

.free-cards .lower-fleet:focus,
.free-cards .inner-runtime:focus {
 border-color: var(--round-screen);
 box-shadow: 0 0 0 3px rgba(12, 14, 18, .08)
}

.free-cards .final-gallery {
 color: var(--half-focus);
 font-size: 11.5px
}

@media (max-width: 860px) {
 .free-cards .smart-stone {
  position: static;
  gap: 0
 }

 .free-cards .metro-lens {
  gap: 6px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 4px 0 8px;
  display: flex
 }

 .free-cards .snap-elements {
  left: 18px;
  right: 18px;
  top: 17px;
  bottom: auto;
  height: 2px;
  width: auto
 }

 .free-cards .snap-elements:after {
  height: 100%;
  transition: width 450ms cubic-bezier(.2, .7, .3, 1);
  width: var(--front-iron, 0%)
 }

 .free-cards .royal-pier {
  display: flex;
  min-width: 0;
  padding: 0;
  flex-direction: column;
  flex: 1 1 0;
  align-items: center;
  gap: 6px
 }

 .free-cards .upper-net {
  font-size: 13px;
  width: 34px;
  height: 34px
 }

 .free-cards .main-oak {
  font-size: 10px;
  height: 0;
  overflow: hidden;
  display: block;
  text-align: center;
  color: #0000
 }

 .free-cards .classic-reset.royal-pier .main-oak {
  color: var(--round-screen);
  height: auto
 }

 .free-cards .native-elm {
  font-size: 19px
 }

}

.lunar-slider {
 display: flex;
 position: fixed;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 align-items: center;
 justify-content: center;
 padding: 24px;
 animation: ridgePearl 250ms ease both;
 background: rgba(15, 23, 42, .55);
 z-index: 9990;
 inset: 0
}

.lunar-slider[hidden] {
 display: none
}

.lunar-slider.swift-engine {
 animation: weightSignal 300ms ease both
}

.safe-bronze {
 border-radius: 24px;
 border: 1px solid rgba(255, 255, 255, .10);
 background: radial-gradient(120% 90% at 50% -20%, rgba(18, 161, 80, .30), #0000 62%), linear-gradient(180deg, #1b2723 0%, #0e1512 100%);
 position: relative;
 overflow: hidden;
 padding: 30px 26px 24px;
 box-shadow: 0 34px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
 text-align: center;
 animation: sierraBronze 400ms cubic-bezier(.2, .8, .3, 1) both;
 color: #ffffff;
 width: min(400px, 100%)
}

.safe-bronze:after {
 content: "";
 inset: -40% -10% auto;
 position: absolute;
 height: 70%;
 pointer-events: none;
 animation: ridge-kestrel 3400ms ease-in-out infinite alternate;
 background: radial-gradient(50% 50% at 50% 50%, rgba(18, 161, 80, .18), #0000 70%)
}

.fluid-silver {
 margin: 2px auto 20px;
 width: 132px;
 height: 132px;
 position: relative
}

.prime-flame {
 transform: rotate(-90deg);
 height: 100%;
 width: 100%
}

.prime-flame circle {
 stroke-width: 7;
 stroke-linecap: round;
 fill: none
}

.half-cards {
 stroke: rgba(255, 255, 255, .10)
}

.bright-sketch {
 filter: drop-shadow(0 0 6px rgba(18, 161, 80, .55));
 stroke: var(--smart-outline, #12a150);
 stroke-dasharray: 327;
 stroke-dashoffset: 327;
 transition: stroke-dashoffset 180ms linear
}

.early-cove {
 gap: 2px;
 inset: 0;
 place-content: center;
 display: grid;
 position: absolute
}

.early-cove i {
 color: var(--smart-outline, #12a150);
 font-size: 26px;
 animation: seedGarnet 1500ms ease-in-out infinite
}

.metro-jade {
 font-size: 24px;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 letter-spacing: -.02em
}

.metro-jade small {
 font-size: 13px;
 font-weight: bold;
 opacity: .6
}

.global-sheet {
 letter-spacing: -.015em;
 font-size: 19px;
 font-weight: 800;
 margin: 0 0 6px;
 color: #ffffff
}

.early-texture {
 margin: 0 0 18px;
 color: rgba(255, 255, 255, .60);
 font-size: 13px;
 line-height: 1.45
}

.solid-sage {
 padding: 0;
 text-align: start;
 display: grid;
 list-style: none;
 margin: 0 0 18px;
 gap: 2px
}

.solid-sage li {
 grid-template-columns: 22px 1fr;
 transition: color 250ms ease, background 250ms ease;
 padding: 7px 10px;
 border-radius: 10px;
 font-size: 13px;
 align-items: center;
 gap: 10px;
 display: grid;
 color: rgba(255, 255, 255, .38)
}

.solid-sage li:before {
 height: 16px;
 border-radius: 50%;
 border: 2px solid rgba(255, 255, 255, .18);
 width: 16px;
 margin-inline: 3px;
 box-sizing: border-box;
 content: ""
}

.solid-sage li.classic-reset {
 background: rgba(255, 255, 255, .06);
 color: #ffffff
}

.solid-sage li.classic-reset:before {
 border-color: var(--smart-outline, #12a150);
 border-top-color: #0000;
 animation: weight-glow 700ms linear infinite
}

.solid-sage li.long-port {
 color: rgba(255, 255, 255, .72)
}

.solid-sage li.long-port:before {
 display: grid;
 place-content: center;
 animation: sierraBreeze 300ms cubic-bezier(.2, .9, .3, 1) both;
 color: #ffffff;
 border-color: var(--smart-outline, #12a150);
 font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
 font-weight: 900;
 font-size: 8px;
 background: var(--smart-outline, #12a150);
 content: "\f00c"
}

.slim-fog {
 border-radius: 99px;
 overflow: hidden;
 position: relative;
 background: rgba(255, 255, 255, .10);
 height: 5px
}

.slim-fog > span {
 width: 0;
 display: block;
 border-radius: 99px;
 height: 100%;
 background: linear-gradient(90deg, var(--smart-outline, #12a150), #3ad07f);
 transition: width 180ms linear
}

.slim-fog:after {
 transform: translateX(-100%);
 animation: weightMarsh 1300ms ease-in-out infinite;
 content: "";
 inset: 0;
 background: linear-gradient(90deg, #0000, rgba(255, 255, 255, .35), #0000);
 position: absolute
}

@media (max-width: 420px) {
 .lunar-slider {
  padding: 16px
 }

 .safe-bronze {
  padding: 26px 18px 20px
 }

 .fluid-silver {
  width: 112px;
  height: 112px
 }

 .metro-jade {
  font-size: 21px
 }

}

@media (prefers-reduced-motion: reduce) {
 .safe-bronze:after,
 .early-cove i,
 .slim-fog:after,
 .solid-sage li.classic-reset:before {
  animation: none
 }

}

.free-cards .west-config {
 background: var(--round-screen, #0f172a);
 box-shadow: 0 4px 12px rgba(15, 23, 42, .18)
}

.free-cards .west-config:hover {
 background: var(--custom-seed, #dc2626);
 box-shadow: none
}

.free-cards .prime-cloud.west-config {
 background: #16a34a
}

.free-cards .base-band.west-config {
 background: #94a3b8
}

@media (max-width: 860px) {
 .free-cards #bright-chrome {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--custom-view, #e5e7eb);
  position: sticky;
  background: var(--native-cliff, #ffffff);
  z-index: 950;
  bottom: 0;
  box-shadow: 0 -10px 26px rgba(15, 23, 42, .10);
  margin: 24px -14px 0
 }

 .free-cards #bright-chrome .mono-peak {
  min-width: 0;
  flex: 1 1 0;
  justify-content: center
 }

 .free-cards #bright-chrome .civic-forest {
  padding-inline: 14px;
  font-size: 14.5px
 }

 .full-mesh {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px))!important
 }

 .simple-extras {
  bottom: calc(156px + env(safe-area-inset-bottom, 0px))!important
 }

}

@keyframes ridgePearl {
 to {
  opacity: 1
 }

 from {
  opacity: 0
 }

}

@keyframes weightSignal {
 from {
  opacity: 1
 }

 to {
  opacity: 0
 }

}

@keyframes sierraBronze {
 to {
  transform: none;
  opacity: 1
 }

 from {
  opacity: 0;
  transform: translateY(16px) scale(.95)
 }

}

@keyframes ridge-kestrel {
 to {
  transform: translate(14%, 12%)
 }

 from {
  transform: translate(-14%, 0)
 }

}

@keyframes seedGarnet {
 50% {
  transform: translateX(3px)
 }

 from,
 to {
  transform: translateX(-3px)
 }

}

@keyframes weight-glow {
 to {
  transform: rotate(360deg)
 }

}

@keyframes sierraBreeze {
 to {
  transform: scale(1);
  opacity: 1
 }

 from {
  transform: scale(.4);
  opacity: 0
 }

}

@keyframes weightMarsh {
 to {
  transform: translateX(100%)
 }

}