body[data-page='online-booking'] [data-anim]:not(.is-live) * {
  animation-play-state: paused !important;
}
body[data-page='online-booking'] .page-hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
  max-width: 13ch;
}
body[data-page='online-booking'] .mono {
  text-transform: none;
}
@keyframes ob-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes ob-pop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes ob-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes ob-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ob-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ob-typing {
  to {
    max-width: 26ch;
  }
}
@keyframes ob-scanline {
  from {
    transform: translateY(-8px);
  }
  to {
    transform: translateY(var(--sh, 60px));
  }
}
body[data-page='online-booking'] :is(.ob-mb, .ob-phone, .ob-tkt, .ob-lockb, .ob-exl, .ob-life) em {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  font-style: normal;
}
.ob-mb {
  --z: #fffdfb;
  --ink: #211a15;
  --mute: #6f6257;
  --line: #e6ddd0;
  --tl: #0d6d63;
  --tl-t: rgba(13, 109, 99, 0.1);
  --tl-t2: rgba(13, 109, 99, 0.18);
  --sand: #f6efe4;
}
.ob-browser {
  box-shadow: 0 60px 100px -40px rgba(20, 24, 120, 0.75), 0 0 0 1px rgba(150, 170, 255, 0.25);
}
.ob-scene {
  padding: 16px 16px 18px;
  background: radial-gradient(62% 42% at 78% 8%, rgba(255, 214, 158, 0.7), rgba(255, 214, 158, 0) 62%),
    linear-gradient(178deg, #2b3a6b 0%, #4a4581 16%, #8a5289 34%, #c96b6f 52%, #f0a35e 68%, #a45a68 82%, #4c3e6e 100%);
}
.ob-mh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #fff;
}
.ob-mh b {
  font-family: var(--f-display);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.ob-logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--z);
  color: var(--tl);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.9rem;
}
.ob-lg {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--f-mono);
  font-size: 0.68rem;
}
.ob-card {
  padding: 14px;
  border-radius: 20px;
  background: var(--z);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(35, 20, 10, 0.5);
}
.ob-prog {
  display: flex;
  gap: 5px;
}
.ob-seg {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background-color 0.35s var(--ease-out);
}
.ob-seg.is-on,
.ob-seg.is-done {
  background: var(--tl);
}
.ob-stage {
  position: relative;
  height: 312px;
  margin-top: 12px;
}
.ob-scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
  font-size: 12.5px;
  line-height: 1.35;
}
.ob-scr.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.ob-q {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.ob-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--sand);
  color: var(--mute);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ob-pill.soft {
  background: var(--tl-t);
  color: var(--tl);
}
.ob-btns {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.ob-b {
  display: grid;
  place-items: center;
  flex: 1;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
}
.ob-b.pri {
  flex: 1.5;
  background: var(--tl);
  border-color: var(--tl);
  color: #fff;
}
.ob-btns-pay .ob-b {
  flex: 1;
}
.ob-cal {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ob-cal-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}
.ob-cal-h span {
  display: flex;
  gap: 6px;
}
.ob-cal-h i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sand);
}
.ob-cal-g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.ob-cal-g s {
  text-decoration: none;
  text-align: center;
  font-size: 9.5px;
  color: var(--mute);
}
.ob-cal-g i {
  display: grid;
  place-items: center;
  height: 20px;
  border-radius: 6px;
  font-style: normal;
  font-size: 10.5px;
}
.ob-cal-g i.past {
  opacity: 0.3;
}
.ob-cal-g i.full {
  opacity: 0.45;
  text-decoration: line-through;
}
.ob-cal-g i.open {
  background: var(--tl-t);
}
.ob-cal-g i.pick {
  background: var(--tl-t);
}
.ob-scr.is-on .ob-cal-g i.pick {
  animation: ob-pick 0.7s 0.8s var(--ease-out) both;
}
@keyframes ob-pick {
  0% {
    background: var(--tl-t);
    color: var(--ink);
  }
  55% {
    transform: scale(1.18);
  }
  100% {
    background: var(--tl);
    color: #fff;
    transform: none;
  }
}
.ob-tour {
  padding: 8px 10px;
  border-radius: 10px;
  border-left: 3px solid var(--tl);
  background: var(--tl-t);
}
.ob-tour b {
  display: block;
  font-size: 12.5px;
}
.ob-tour small {
  font-size: 11px;
  color: var(--mute);
}
.ob-scr.is-on .ob-tour {
  animation: ob-rise 0.5s 1.5s both;
}
.ob-pkg {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ob-pkg.is-hot {
  border-color: var(--tl);
  background: var(--tl-t);
}
.ob-pkg.is-two {
  opacity: 0.8;
}
.ob-pk-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.ob-pk-h b {
  font-size: 13px;
}
.ob-pk-r {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.ob-pk-r em {
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  color: var(--mute);
  margin-left: 4px;
}
.ob-stp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ob-stp i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  color: var(--mute);
}
.ob-num {
  display: inline-grid;
  min-width: 14px;
  text-align: center;
  font-weight: 700;
}
.ob-num i {
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}
.ob-scr.is-on .ob-num i:first-child {
  animation: ob-out 0.25s var(--dl, 0ms) both;
}
.ob-scr.is-on .ob-num i:last-child {
  opacity: 0;
  animation: ob-in 0.25s var(--dl, 0ms) both;
}
.ob-sumbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--sand);
  font-weight: 600;
}
.ob-exl {
  display: grid;
  gap: 6px;
}
.ob-exl li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ob-exn {
  flex: 1;
}
.ob-exl em {
  font-style: normal;
  color: var(--mute);
}
.ob-tg {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 99px;
  background: #d9d0c3;
}
.ob-tg b {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}
.ob-scr.is-on .ob-exl li.go .ob-tg {
  animation: ob-tgbg 0.3s var(--dl) forwards;
}
.ob-scr.is-on .ob-exl li.go .ob-tg b {
  animation: ob-tgb 0.3s var(--dl) var(--ease-out) forwards;
}
@keyframes ob-tgbg {
  to {
    background: var(--tl);
  }
}
@keyframes ob-tgb {
  to {
    transform: translateX(12px);
  }
}
.ob-lines li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.ob-code {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-code-in {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ob-code-in small {
  display: block;
  font-size: 9.5px;
  color: var(--mute);
}
.ob-type {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  font-style: normal;
}
.ob-scr.is-on .ob-type {
  animation: ob-typing 1.1s steps(26, end) var(--dl, 0.5s) forwards;
}
.ob-code-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 99px;
  background: var(--tl-t2);
  color: var(--tl);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
}
.ob-scr.is-on .ob-code-ok {
  animation: ob-pop 0.4s 1.7s both;
}
.ob-tot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--sand);
  font-weight: 600;
}
.ob-tot b {
  font-size: 15px;
}
.ob-tot-v {
  display: inline-grid;
  text-align: right;
}
.ob-tot-v > * {
  grid-area: 1 / 1;
}
.ob-tot-v s {
  color: var(--mute);
}
.ob-tot-v b {
  opacity: 0;
}
.ob-scr.is-on .ob-tot-v s {
  animation: ob-out 0.3s 2s both;
}
.ob-scr.is-on .ob-tot-v b {
  animation: ob-in 0.3s 2s both;
}
.ob-flds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ob-fld {
  padding: 4px 9px 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  min-width: 0;
}
.ob-fld small {
  display: block;
  font-size: 9.5px;
  color: var(--mute);
}
.ob-fld > span {
  display: block;
  height: 17px;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}
.ob-fld.sel > span::after {
  content: '▾';
  float: right;
  color: var(--mute);
  margin-left: 6px;
}
.ob-terms {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--mute);
}
.ob-cb {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  color: transparent;
}
.ob-scr.is-on .ob-cb {
  animation: ob-cb 0.3s 3.4s forwards;
}
@keyframes ob-cb {
  to {
    background: var(--tl);
    border-color: var(--tl);
    color: #fff;
  }
}
.ob-payv {
  display: grid;
  gap: 8px;
}
.ob-cardf {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0d6d63, #1f4f8f);
}
.ob-cardf small {
  font-size: 10px;
  opacity: 0.8;
}
.ob-cardf b {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.ob-chip {
  width: 26px;
  height: 18px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, #f0d28a, #c9a24a);
}
.ob-3ds,
.ob-okv {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  background: var(--z);
  opacity: 0;
  visibility: hidden;
}
.ob-3ds-i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--tl-t2);
  color: var(--tl);
}
.ob-3ds b {
  font-size: 13px;
}
.ob-3ds-bar {
  display: block;
  width: 70%;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.ob-3ds-bar i {
  display: block;
  height: 100%;
  background: var(--tl);
  transform-origin: left;
  transform: scaleX(0);
}
.ob-scr.is-on .ob-3ds {
  visibility: visible;
  animation: ob-3ds 1.7s 1s both;
}
.ob-scr.is-on .ob-3ds-bar i {
  animation: ob-fill 1.3s 1.2s linear both;
}
@keyframes ob-3ds {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
  14%,
  86% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ob-fill {
  to {
    transform: scaleX(1);
  }
}
.ob-okv svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--tl);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ob-okv circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  stroke-opacity: 0.35;
}
.ob-okv path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.ob-okv b {
  font-size: 14px;
}
.ob-okv small {
  color: var(--mute);
  font-size: 11px;
}
.ob-okq {
  width: 64px;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: #0b1140;
}
.ob-scr.is-on .ob-okv {
  visibility: visible;
  animation: ob-pop 0.5s 2.6s both;
}
.ob-scr.is-on .ob-okv circle {
  animation: ob-draw 0.7s 2.7s ease-out forwards;
}
.ob-scr.is-on .ob-okv path {
  animation: ob-draw 0.4s 3.2s ease-out forwards;
}
.ob-scr.is-on .ob-btns-pay {
  animation: ob-out 0.3s 1s both;
}
.ob-heroart {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
}
.ob-fc1 {
  top: -7%;
  left: -8%;
}
.ob-fc2 {
  top: 17%;
  right: -10%;
}
.ob-fc3 {
  top: 76%;
  left: -10%;
}
.ob-fc4 {
  top: 96%;
  right: -1%;
}
@media (max-width: 1100px) {
  .ob-fc1,
  .ob-fc3 {
    left: -3%;
  }
  .ob-fc2 {
    right: -3%;
  }
}
@media (max-width: 640px) {
  .ob-fc1,
  .ob-fc3,
  .ob-fc4 {
    display: none;
  }
  .ob-fc2 {
    right: 2%;
    top: auto;
    bottom: -7%;
  }
}
.ob-flow {
  border-top-left-radius: clamp(28px, 4vw, 64px);
  border-top-right-radius: clamp(28px, 4vw, 64px);
  margin-top: calc(clamp(28px, 4vw, 64px) * -1);
  z-index: 2;
}
.ob-flow .sec-head h2 em,
.ob-lang .sec-head h2 em {
  color: #3b3fe0;
}
.ob-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.ob-sline {
  position: absolute;
  left: calc(100% / 12);
  right: calc(100% / 12);
  top: 21px;
  height: 2px;
  border-radius: 2px;
  background: var(--bd-2);
  overflow: hidden;
}
.ob-sline b {
  display: block;
  height: 100%;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform 0.6s var(--ease-out);
}
.ob-st {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  min-height: 44px;
  padding: 0 2px 6px;
  color: var(--fg-3);
}
.ob-sn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bd-2);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.82rem;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ob-sl {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fg-2);
  transition: color 0.3s var(--ease-out);
}
.ob-st.is-done .ob-sn {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
}
.ob-st.is-on .ob-sn {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(75, 69, 240, 0.16);
}
.ob-st.is-on .ob-sl {
  color: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .ob-st:hover .ob-sn {
    border-color: var(--fg-2);
  }
}
.ob-flowgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
.ob-flow .ob-browser {
  box-shadow: 0 50px 90px -40px rgba(20, 24, 120, 0.7), 0 0 0 8px rgba(255, 255, 255, 0.45);
}
.ob-panels {
  min-height: 300px;
  display: grid;
  align-content: center;
}
.ob-panel h3 {
  margin-top: 10px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  letter-spacing: -0.035em;
}
.ob-panel > p {
  margin: 1rem 0 1.4rem;
  color: var(--fg-2);
  max-width: 46ch;
}
.ob-pk {
  color: var(--accent);
}
.js .ob-panel:not(.is-on) {
  display: none;
}
.js .ob-panel.is-on > * {
  animation: ob-rise 0.6s var(--ease-out) both;
}
.js .ob-panel.is-on > *:nth-child(2) {
  animation-delay: 60ms;
}
.js .ob-panel.is-on > *:nth-child(3) {
  animation-delay: 120ms;
}
.js .ob-panel.is-on > *:nth-child(4) {
  animation-delay: 180ms;
}
@media (max-width: 900px) {
  .ob-flowgrid {
    grid-template-columns: 1fr;
  }
  .ob-panels {
    min-height: 0;
  }
  .ob-sl {
    font-size: 0.72rem;
  }
  .ob-sn {
    width: 38px;
    height: 38px;
  }
  .ob-sline {
    top: 18px;
  }
}
.ob-pay {
  overflow: clip;
}
.ob-pay .wrap {
  position: relative;
  z-index: 2;
}
.ob-pay .sec-head h2 em,
.ob-embed .sec-head h2 em,
.ob-ticket .sec-head h2 em,
.ob-control .sec-head h2 em {
  color: #b7c6ff;
}
.ob-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.ob-mode {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: start;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
}
.ob-mode h3 {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}
.ob-mode p {
  color: var(--fg-2);
  font-size: 0.97rem;
}
.ob-mbtn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-top: 6px;
  align-self: end;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--grad-btn);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.88rem;
}
.ob-mode-none .ob-mbtn {
  background: #12b886;
}
.ob-ringw {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: 4px;
}
.ob-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ob-r-bg,
.ob-r-fg {
  fill: none;
  stroke-width: 8;
}
.ob-r-bg {
  stroke: rgba(150, 170, 255, 0.16);
}
.ob-r-fg {
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: 0;
  animation: ob-rf 5.4s var(--ease-out) infinite;
}
.ob-ring-dep .ob-r-fg {
  stroke: #b98bff;
  animation-name: ob-rd;
}
.ob-ring-none .ob-r-bg {
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}
.ob-ring-none .ob-r-fg {
  display: none;
}
@keyframes ob-rf {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  38%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ob-rd {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  38%,
  88% {
    stroke-dashoffset: 70;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 70;
    opacity: 0;
  }
}
.ob-r-t {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  color: #fff;
}
.ob-r-t b {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ob-r-t small {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.ob-mode-none .ob-r-t {
  color: #37e6a0;
}
.ob-paygrid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
}
.ob-rescue h3,
.ob-guard h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
}
.ob-rescue {
  display: flex;
  flex-direction: column;
}
.ob-rescue .ob-rs {
  margin-block: auto;
  padding-block: 30px 10px;
}
.ob-rs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: start;
  margin-top: 30px;
}
.ob-rn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.ob-rn b {
  font-family: var(--f-display);
  font-size: 0.88rem;
  line-height: 1.2;
}
.ob-rn small {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.ob-rico {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid var(--bd-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-2);
}
.ob-rl {
  position: relative;
  height: 54px;
}
.ob-rl i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--bd-2);
}
.ob-rl i::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: var(--c, var(--cyan));
  transform-origin: left;
  transform: scaleX(0);
}
.ob-rbad,
.ob-rgood {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: 6px 0;
  padding: 2px 8px;
  border-radius: 99px;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
}
.ob-rbad {
  background: rgba(255, 143, 176, 0.16);
  color: #ff8fb0;
  border: 1px solid rgba(255, 143, 176, 0.4);
}
.ob-rgood {
  background: rgba(55, 230, 160, 0.14);
  color: #37e6a0;
  border: 1px solid rgba(55, 230, 160, 0.4);
}
.ob-rescue.is-live .ob-rn1 .ob-rico,
.ob-rescue .ob-rn1 .ob-rico {
  animation: ob-n1 10s linear infinite;
}
.ob-rescue .ob-rn2 .ob-rico {
  animation: ob-n2 10s linear infinite;
}
.ob-rescue .ob-rn3 .ob-rico {
  animation: ob-n3 10s linear infinite;
}
.ob-rescue .ob-rn4 .ob-rico {
  animation: ob-n4 10s linear infinite;
}
.ob-rescue .ob-rl1 i::after {
  --c: var(--cyan);
  animation: ob-l1 10s linear infinite;
}
.ob-rescue .ob-rl2 i::after {
  --c: #ff8fb0;
  animation: ob-l2 10s linear infinite;
}
.ob-rescue .ob-rl3 i::after {
  --c: #37e6a0;
  animation: ob-l3 10s linear infinite;
}
.ob-rescue .ob-rbad {
  animation: ob-bad 10s linear infinite;
}
.ob-rescue .ob-rgood {
  animation: ob-good 10s linear infinite;
}
.ob-rn3 .ob-rico::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 2px solid transparent;
  border-top-color: var(--violet);
  opacity: 0;
  animation: ob-sweep 10s linear infinite;
}
@keyframes ob-n1 {
  0%,
  2% {
    border-color: var(--bd-2);
    color: var(--fg-2);
  }
  6%,
  22% {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 0 6px rgba(23, 205, 235, 0.12);
  }
  30%,
  100% {
    border-color: var(--bd-2);
    color: var(--fg-2);
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes ob-n2 {
  0%,
  24% {
    border-color: var(--bd-2);
    color: var(--fg-2);
  }
  28%,
  44% {
    border-color: #ff8fb0;
    color: #ff8fb0;
    box-shadow: 0 0 0 6px rgba(255, 143, 176, 0.12);
  }
  52%,
  100% {
    border-color: var(--bd-2);
    color: var(--fg-2);
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes ob-n3 {
  0%,
  44% {
    border-color: var(--bd-2);
    color: var(--fg-2);
  }
  48%,
  70% {
    border-color: var(--violet);
    color: #c9a3ff;
    box-shadow: 0 0 0 6px rgba(155, 60, 255, 0.14);
  }
  78%,
  100% {
    border-color: var(--bd-2);
    color: var(--fg-2);
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes ob-n4 {
  0%,
  78% {
    border-color: var(--bd-2);
    color: var(--fg-2);
  }
  84%,
  95% {
    border-color: #37e6a0;
    color: #37e6a0;
    box-shadow: 0 0 0 6px rgba(55, 230, 160, 0.14);
  }
  100% {
    border-color: var(--bd-2);
    color: var(--fg-2);
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes ob-l1 {
  0%,
  8% {
    transform: scaleX(0);
    opacity: 1;
  }
  22%,
  92% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}
@keyframes ob-l2 {
  0%,
  24% {
    transform: scaleX(0);
    opacity: 1;
  }
  32%,
  44% {
    transform: scaleX(0.38);
    opacity: 1;
  }
  52%,
  100% {
    transform: scaleX(0.38);
    opacity: 0;
  }
}
@keyframes ob-l3 {
  0%,
  70% {
    transform: scaleX(0);
    opacity: 1;
  }
  80%,
  92% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}
@keyframes ob-bad {
  0%,
  28% {
    opacity: 0;
    transform: translateY(4px);
  }
  32%,
  44% {
    opacity: 1;
    transform: none;
  }
  52%,
  100% {
    opacity: 0;
  }
}
@keyframes ob-good {
  0%,
  82% {
    opacity: 0;
    transform: translateY(4px);
  }
  86%,
  95% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ob-sweep {
  0%,
  46% {
    opacity: 0;
    transform: rotate(0);
  }
  48% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: rotate(720deg);
  }
  74%,
  100% {
    opacity: 0;
    transform: rotate(720deg);
  }
}
.ob-gm {
  display: grid;
  gap: 9px;
  margin-top: 20px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  color: #1a1d23;
}
.ob-gm > b {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
}
.ob-gf {
  display: grid;
  gap: 3px;
  font-size: 10.5px;
  color: #6b7280;
}
.ob-gf i {
  height: 26px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #f9fafb;
}
.ob-ts {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fafafa;
}
.ob-tbox {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid #c9ced6;
  background: #fff;
  color: #16a34a;
}
.ob-tbox svg {
  opacity: 0;
  animation: ob-tsok 8s linear infinite;
}
.ob-spin {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  border-right-color: transparent;
  opacity: 0;
  animation: ob-tsspin 8s linear infinite, ob-tsspinv 8s linear infinite;
}
@keyframes ob-tsspin {
  to {
    transform: rotate(1440deg);
  }
}
@keyframes ob-tsspinv {
  0%,
  8% {
    opacity: 0;
  }
  10%,
  40% {
    opacity: 1;
  }
  44%,
  100% {
    opacity: 0;
  }
}
@keyframes ob-tsok {
  0%,
  42% {
    opacity: 0;
  }
  46%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ob-ts-t {
  flex: 1;
  display: inline-grid;
  font-size: 11.5px;
}
.ob-ts-t i {
  grid-area: 1 / 1;
  font-style: normal;
}
.ob-ts-t i:first-child {
  animation: ob-tst1 8s linear infinite;
}
.ob-ts-t i:last-child {
  color: #15803d;
  font-weight: 600;
  opacity: 0;
  animation: ob-tsok 8s linear infinite;
}
@keyframes ob-tst1 {
  0%,
  42% {
    opacity: 1;
  }
  46%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ob-tsl {
  font-size: 9px;
  color: #9ca3af;
}
.ob-tries {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 4px;
  font-size: 10px;
  color: #6b7280;
}
.ob-tries ol {
  display: flex;
  gap: 4px;
}
.ob-tries li {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e5e7eb;
  animation: ob-try 10s linear infinite;
  animation-delay: calc(var(--n) * 0.18s);
}
@keyframes ob-try {
  0%,
  50% {
    background: #e5e7eb;
  }
  54%,
  88% {
    background: #dc2626;
  }
  94%,
  100% {
    background: #e5e7eb;
  }
}
.ob-lockb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 99px;
  background: #fee2e2;
  color: #b91c1c;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0;
  animation: ob-lockv 10s linear infinite;
}
@keyframes ob-lockv {
  0%,
  72% {
    opacity: 0;
  }
  76%,
  90% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}
.ob-land {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(28px, 4vw, 52px);
  border-top: 1px solid var(--bd);
}
.ob-land h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.03em;
}
.ob-land p {
  margin-top: 1rem;
  color: var(--fg-2);
  max-width: 50ch;
}
.ob-land strong {
  color: var(--fg);
}
.ob-win {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--bd-2);
  background: var(--ink-800);
  box-shadow: 0 40px 80px -40px rgba(20, 24, 120, 0.8);
}
.ob-wrows li {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(150, 170, 255, 0.1);
}
.ob-wrows li.dim {
  padding-block: 20px;
}
.ob-newrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  animation: ob-newrow 7s var(--ease-out) infinite;
}
.ob-newrow .w-d {
  flex: 1;
  min-width: 130px;
  font-size: 0.92rem;
}
.ob-src {
  padding: 4px 10px;
  font-size: 0.66rem;
}
@keyframes ob-newrow {
  0% {
    opacity: 0;
    transform: translateY(-16px);
    background: rgba(23, 205, 235, 0.16);
  }
  8% {
    opacity: 1;
    transform: none;
    background: rgba(23, 205, 235, 0.16);
  }
  22%,
  90% {
    opacity: 1;
    transform: none;
    background: transparent;
  }
  100% {
    opacity: 0;
    transform: none;
    background: transparent;
  }
}
@media (max-width: 960px) {
  .ob-modes {
    grid-template-columns: 1fr;
  }
  .ob-mode {
    grid-template-rows: none;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    align-items: center;
  }
  .ob-mode .ob-ringw {
    grid-row: 1 / 4;
  }
  .ob-mode .ob-mbtn {
    justify-self: start;
  }
  .ob-paygrid,
  .ob-land {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .ob-mode {
    grid-template-columns: 1fr;
  }
  .ob-mode .ob-ringw {
    grid-row: auto;
  }
  .ob-rs {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: start;
  }
  .ob-rn {
    grid-template-columns: 54px 1fr;
    justify-items: start;
    text-align: left;
    column-gap: 14px;
    align-items: center;
  }
  .ob-rn .ob-rico {
    grid-row: 1 / 3;
  }
  .ob-rn b,
  .ob-rn small {
    grid-column: 2;
  }
  .ob-rl {
    width: 54px;
    height: 28px;
  }
  .ob-rl i {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-left: 2px dashed var(--bd-2);
  }
  .ob-rl i::after {
    left: -2px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform-origin: top;
    transform: scaleY(0);
  }
  .ob-rescue .ob-rl1 i::after {
    animation-name: ob-l1v;
  }
  .ob-rescue .ob-rl2 i::after {
    animation-name: ob-l2v;
  }
  .ob-rescue .ob-rl3 i::after {
    animation-name: ob-l3v;
  }
  .ob-rbad,
  .ob-rgood {
    top: 2px;
    left: 130px;
    translate: 0 0;
  }
}
@keyframes ob-l1v {
  0%,
  8% {
    transform: scaleY(0);
  }
  22%,
  92% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
@keyframes ob-l2v {
  0%,
  24% {
    transform: scaleY(0);
  }
  32%,
  44% {
    transform: scaleY(0.38);
  }
  52%,
  100% {
    transform: scaleY(0.38);
    opacity: 0;
  }
}
@keyframes ob-l3v {
  0%,
  70% {
    transform: scaleY(0);
  }
  80%,
  92% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
.ob-domain {
  border-top-left-radius: clamp(28px, 4vw, 64px);
  border-top-right-radius: clamp(28px, 4vw, 64px);
  margin-top: calc(clamp(28px, 4vw, 64px) * -1);
  z-index: 2;
}
.ob-domgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
.ob-domain .sec-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.8rem);
}
.ob-domain .sec-head {
  margin-bottom: 28px;
}
.ob-addr {
  display: grid;
  margin-bottom: 30px;
  border-top: 1px solid var(--bd);
}
.ob-addr li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
}
.ob-addr span {
  color: var(--fg-3);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ob-addr code {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.ob-addr .ob-a1 code {
  color: #3b3fe0;
  font-weight: 600;
}
.ob-dsteps {
  display: grid;
  gap: 18px;
}
.ob-dsteps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  opacity: 0.5;
}
.ob-dn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.78rem;
}
.ob-dsteps h3 {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.ob-dsteps p {
  margin-top: 4px;
  color: var(--fg-2);
  font-size: 0.95rem;
}
.ob-ds1 {
  animation: ob-ds1 9s linear infinite;
}
.ob-ds2 {
  animation: ob-ds2 9s linear infinite;
}
.ob-ds3 {
  animation: ob-ds3 9s linear infinite;
}
@keyframes ob-ds1 {
  0%,
  32% {
    opacity: 1;
  }
  38%,
  96% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ob-ds2 {
  0%,
  30% {
    opacity: 0.5;
  }
  36%,
  62% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0.5;
  }
}
@keyframes ob-ds3 {
  0%,
  64% {
    opacity: 0.5;
  }
  70%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
.ob-dns {
  display: grid;
  justify-items: stretch;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: 26px;
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  border: 1px solid rgba(120, 130, 255, 0.3);
  box-shadow: 0 50px 90px -40px rgba(20, 24, 120, 0.7), 0 0 0 8px rgba(255, 255, 255, 0.45);
  color: #eaf0ff;
}
.ob-dnode {
  display: grid;
  gap: 8px;
  padding: 14px;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--bd-2);
  background: rgba(255, 255, 255, 0.04);
}
.ob-dt {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ob-rec {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.ob-rec b {
  color: #7fe3f7;
  font-weight: 500;
}
.ob-rec.ghost {
  opacity: 0.55;
}
.ob-rec-new {
  border: 1px solid rgba(23, 205, 235, 0.4);
  background: rgba(23, 205, 235, 0.08);
  color: #fff;
  animation: ob-rec 9s var(--ease-out) infinite;
}
@keyframes ob-rec {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  6%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.ob-dl {
  position: relative;
  justify-self: center;
  width: 2px;
  height: 44px;
  background: repeating-linear-gradient(to bottom, var(--bd-2) 0 4px, transparent 4px 8px);
}
.ob-dl i {
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  opacity: 0;
}
.ob-dl1 i {
  animation: ob-dot1 9s linear infinite;
}
.ob-dl2 i {
  animation: ob-dot2 9s linear infinite;
}
@keyframes ob-dot1 {
  0%,
  24% {
    opacity: 0;
    transform: translateY(0);
  }
  26% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    transform: translateY(36px);
  }
  42%,
  100% {
    opacity: 0;
    transform: translateY(36px);
  }
}
@keyframes ob-dot2 {
  0%,
  58% {
    opacity: 0;
    transform: translateY(0);
  }
  60% {
    opacity: 1;
  }
  74% {
    opacity: 1;
    transform: translateY(36px);
  }
  76%,
  100% {
    opacity: 0;
    transform: translateY(36px);
  }
}
.ob-dn-dns {
  animation: ob-g1 9s linear infinite;
}
.ob-dn-ag {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  animation: ob-g2 9s linear infinite;
}
.ob-dn-ag img {
  width: 44px;
  height: auto;
}
.ob-dn-ag b {
  font-family: var(--f-display);
  font-size: 1.05rem;
}
.ob-dn-br {
  animation: ob-g3 9s linear infinite;
}
@keyframes ob-g1 {
  0%,
  30% {
    border-color: rgba(23, 205, 235, 0.55);
  }
  38%,
  100% {
    border-color: var(--bd-2);
  }
}
@keyframes ob-g2 {
  0%,
  38% {
    border-color: var(--bd-2);
  }
  44%,
  66% {
    border-color: rgba(155, 60, 255, 0.7);
  }
  72%,
  100% {
    border-color: var(--bd-2);
  }
}
@keyframes ob-g3 {
  0%,
  74% {
    border-color: var(--bd-2);
  }
  80%,
  96% {
    border-color: rgba(55, 230, 160, 0.6);
  }
  100% {
    border-color: var(--bd-2);
  }
}
.ob-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid rgba(55, 230, 160, 0.4);
  background: rgba(55, 230, 160, 0.1);
  color: #37e6a0;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  animation: ob-cert 9s var(--ease-out) infinite;
}
@keyframes ob-cert {
  0%,
  46% {
    opacity: 0;
    transform: scale(0.9);
  }
  52%,
  96% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.ob-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  min-height: 36px;
}
.ob-lockic {
  display: inline-flex;
  color: #37e6a0;
  opacity: 0;
  animation: ob-lock 9s linear infinite;
}
@keyframes ob-lock {
  0%,
  86% {
    opacity: 0;
    transform: scale(0.6);
  }
  90%,
  96% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.ob-urlt {
  min-width: 0;
}
.ob-urlt i {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  font-style: normal;
  animation: ob-urlty 9s steps(26, end) infinite;
}
@keyframes ob-urlty {
  0%,
  76% {
    max-width: 0;
  }
  90%,
  96% {
    max-width: 26ch;
  }
  100% {
    max-width: 0;
  }
}
.ob-bl {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}
.ob-domnote {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--bd);
  color: var(--fg-2);
  font-size: 0.96rem;
}
.ob-domnote .ico {
  color: #12a06a;
  flex: none;
}
@media (max-width: 900px) {
  .ob-domgrid {
    grid-template-columns: 1fr;
  }
}
.ob-embed {
  overflow: clip;
}
.ob-embed .wrap {
  position: relative;
  z-index: 2;
}
.ob-embgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.ob-embed .sec-head h2 {
  font-size: clamp(2.1rem, 4.4vw, 4rem);
}
.ob-embed .sec-head {
  margin-bottom: 28px;
}
.ob-tabs .tab-list {
  margin-bottom: 14px;
}
.ob-tabs .tab-list [role='tab'][aria-selected='true'] {
  background: var(--grad-btn);
  border-color: transparent;
}
.ob-tabs .tab-list [role='tab'] {
  height: 44px;
}
.ob-tabs .ob-ep[hidden] {
  display: none;
}
.ob-codeb {
  margin: 0;
  font-size: 0.8rem;
}
.ob-codef {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}
.ob-codef p {
  color: var(--fg-3);
  font-size: 0.86rem;
}
.ob-codef code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--f-mono);
  font-size: 0.9em;
  color: #cfd8ff;
}
.ob-copy {
  flex: none;
}
.ob-copy.is-done {
  border-color: #37e6a0;
  color: #37e6a0;
}
.ob-allow {
  margin-top: 30px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--bd);
  border-radius: 20px;
  background: var(--card);
}
.ob-allow h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.ob-allow p {
  margin: 8px 0 16px;
  color: var(--fg-2);
  font-size: 0.94rem;
}
.ob-allow ul {
  display: grid;
  gap: 8px;
}
.ob-allow li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: rgba(255, 255, 255, 0.03);
}
.ob-alv {
  font-size: 0.76rem;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.ob-allow li.no {
  animation: ob-block 6s linear infinite;
}
@keyframes ob-block {
  0%,
  40% {
    border-color: var(--bd);
    background: rgba(255, 255, 255, 0.03);
  }
  46%,
  70% {
    border-color: rgba(255, 143, 176, 0.6);
    background: rgba(255, 143, 176, 0.08);
  }
  80%,
  100% {
    border-color: var(--bd);
    background: rgba(255, 255, 255, 0.03);
  }
}
.ob-site {
  position: sticky;
  top: 100px;
  border-radius: 20px;
  box-shadow: 0 50px 90px -40px rgba(20, 24, 120, 0.8), 0 0 0 1px rgba(150, 170, 255, 0.2);
}
.ob-sbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 520px;
  padding: 14px;
  overflow: hidden;
  background: #f7f8fb;
  color: #1a1d23;
}
.ob-sbody .skel {
  background: linear-gradient(90deg, #e6e9f2, #d5dae9, #e6e9f2);
  background-size: 200% 100%;
  width: var(--w);
}
.ob-snav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ob-snav .lg {
  width: 24px;
  height: 24px;
  margin-right: auto;
  border-radius: 7px;
  background: #0d6d63;
}
.ob-shero {
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 92px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(120deg, #2b3a6b, #8a5289 60%, #f0a35e);
  color: #fff;
}
.ob-shero b {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ob-shero .skel {
  height: 7px;
  background: rgba(255, 255, 255, 0.35);
}
.ob-sscript {
  align-self: flex-start;
  padding: 4px 9px;
  border: 1.5px dashed #0d6d63;
  border-radius: 8px;
  font-size: 0.7rem;
  color: #0d6d63;
  background: #fff;
  animation: ob-script 9s linear infinite;
}
@keyframes ob-script {
  0%,
  9% {
    opacity: 1;
    transform: none;
  }
  14%,
  100% {
    opacity: 0.4;
    transform: scale(0.96);
  }
}
.ob-sframe {
  position: relative;
  flex: none;
  height: 0;
  overflow: hidden;
  border: 1.5px dashed #17a5c2;
  border-radius: 12px;
  background: #fff;
  animation: ob-grow 9s var(--ease-out) infinite;
}
@keyframes ob-grow {
  0%,
  9% {
    height: 0;
    opacity: 0;
  }
  14%,
  40% {
    height: 150px;
    opacity: 1;
  }
  48%,
  70% {
    height: 232px;
    opacity: 1;
  }
  78%,
  94% {
    height: 306px;
    opacity: 1;
  }
  100% {
    height: 306px;
    opacity: 0;
  }
}
.ob-ftag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 8px;
  border-radius: 0 0 8px 0;
  background: #17a5c2;
  color: #fff;
  font-size: 0.6rem;
}
.ob-fh {
  position: absolute;
  right: 8px;
  top: 5px;
  display: inline-flex;
  gap: 4px;
  font-size: 0.6rem;
  color: #0e7f96;
}
.ob-fh b {
  display: inline-grid;
  font-weight: 700;
}
.ob-fh i {
  grid-area: 1 / 1;
  font-style: normal;
  opacity: 0;
}
.ob-fh i:nth-child(1) {
  animation: ob-h1 9s linear infinite;
}
.ob-fh i:nth-child(2) {
  animation: ob-h2 9s linear infinite;
}
.ob-fh i:nth-child(3) {
  animation: ob-h3 9s linear infinite;
}
@keyframes ob-h1 {
  0%,
  12% {
    opacity: 0;
  }
  16%,
  44% {
    opacity: 1;
  }
  48%,
  100% {
    opacity: 0;
  }
}
@keyframes ob-h2 {
  0%,
  46% {
    opacity: 0;
  }
  50%,
  72% {
    opacity: 1;
  }
  76%,
  100% {
    opacity: 0;
  }
}
@keyframes ob-h3 {
  0%,
  74% {
    opacity: 0;
  }
  80%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ob-fin {
  display: grid;
  gap: 10px;
  padding: 26px 12px 12px;
}
.ob-fst {
  display: flex;
  gap: 6px;
}
.ob-fst i {
  padding: 3px 9px;
  border-radius: 99px;
  background: #eef1f5;
  color: #6b7280;
  font-style: normal;
  font-size: 0.62rem;
}
.ob-fst i:first-child {
  background: #0d6d63;
  color: #fff;
}
.ob-fs {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  opacity: 0;
}
.ob-fs1 {
  animation: ob-fs1 9s linear infinite;
}
.ob-fs2 {
  animation: ob-fs2 9s linear infinite;
}
.ob-fs3 {
  animation: ob-fs3 9s linear infinite;
}
@keyframes ob-fs1 {
  0%,
  14% {
    opacity: 0;
    transform: translateY(6px);
  }
  20%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ob-fs2 {
  0%,
  46% {
    opacity: 0;
    transform: translateY(6px);
  }
  54%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ob-fs3 {
  0%,
  78% {
    opacity: 0;
    transform: translateY(6px);
  }
  84%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.ob-fcal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ob-fcal i {
  height: 16px;
  border-radius: 4px;
  background: #e8f3f1;
}
.ob-fcal i.on {
  background: #0d6d63;
}
.ob-fbtn {
  height: 28px;
  border-radius: 8px;
  background: #0d6d63;
}
.ob-sfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #dde1ec;
  color: #6b7280;
  font-size: 0.68rem;
}
@media (max-width: 900px) {
  .ob-embgrid {
    grid-template-columns: 1fr;
  }
  .ob-site {
    position: relative;
    top: 0;
  }
  .ob-codef {
    flex-direction: column;
    align-items: flex-start;
  }
}
.ob-menu {
  border-top-left-radius: clamp(28px, 4vw, 64px);
  border-top-right-radius: clamp(28px, 4vw, 64px);
  margin-top: calc(clamp(28px, 4vw, 64px) * -1);
  z-index: 2;
}
.ob-menu .sec-head h2 em,
.ob-domain .sec-head h2 em {
  color: #3b3fe0;
}
.ob-menugrid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: center;
}
.ob-menu .sec-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.7rem);
}
.ob-menu .sec-head {
  margin-bottom: 28px;
}
.ob-menuphone {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.ob-pstage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 24px 0;
}
.ob-pstage::before {
  content: '';
  position: absolute;
  inset: 8% 6%;
  border-radius: 40%;
  background: radial-gradient(circle, rgba(155, 60, 255, 0.22), rgba(31, 107, 255, 0.14) 55%, transparent 72%);
  filter: blur(30px);
}
.ob-phone {
  position: relative;
  width: min(292px, 100%);
  aspect-ratio: 292 / 596;
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(160deg, #262e70, #0a0f34 55%);
  box-shadow: 0 50px 80px -30px rgba(20, 24, 120, 0.7), 0 0 0 1px rgba(150, 170, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ob-pn {
  position: absolute;
  z-index: 5;
  top: 19px;
  left: 50%;
  width: 78px;
  height: 22px;
  border-radius: 12px;
  background: #02040f;
  transform: translateX(-50%);
}
.ob-ps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 46px 12px 12px;
  border-radius: 37px;
  overflow: hidden;
  background: #fbf6ee;
  color: #211a15;
  font-size: 12px;
}
.ob-ps::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(20, 14, 10, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.ob-menugrid:is([data-i='1'], [data-i='2'], [data-i='3']) .ob-ps::after {
  opacity: 1;
}
.ob-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ob-ph b {
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: -0.02em;
}
.ob-plg {
  display: inline-grid;
  padding: 3px 9px;
  border-radius: 99px;
  background: #efe6d8;
  font-family: var(--f-mono);
  font-size: 10px;
}
.ob-plg i {
  grid-area: 1 / 1;
  font-style: normal;
  text-align: center;
  transition: opacity 0.3s var(--ease-out);
}
.ob-plg .le {
  opacity: 0;
}
.ob-menugrid:is([data-i='2'], [data-i='3']) .ob-plg .lt {
  opacity: 0;
}
.ob-menugrid:is([data-i='2'], [data-i='3']) .ob-plg .le {
  opacity: 1;
}
.ob-car {
  position: relative;
  flex: none;
  height: 94px;
  border-radius: 16px;
  overflow: hidden;
}
.ob-car-t {
  display: flex;
  width: 300%;
  height: 100%;
  animation: ob-car 9s var(--ease-in-out) infinite;
}
.ob-slide {
  display: flex;
  align-items: flex-end;
  width: calc(100% / 3);
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--h), #4c3e6e);
}
.ob-slide b {
  color: #fff;
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: -0.01em;
}
@keyframes ob-car {
  0%,
  28% {
    transform: none;
  }
  36%,
  61% {
    transform: translateX(-33.333%);
  }
  69%,
  94% {
    transform: translateX(-66.666%);
  }
  100% {
    transform: none;
  }
}
.ob-dots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 4px;
}
.ob-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.ob-dots i:first-child {
  background: #fff;
}
.ob-cats {
  display: flex;
  gap: 6px;
  overflow: hidden;
}
.ob-cats i {
  flex: none;
  padding: 5px 10px;
  border-radius: 99px;
  background: #efe6d8;
  font-style: normal;
  font-size: 11px;
}
.ob-cats i.on {
  background: #0d6d63;
  color: #fff;
}
.ob-items {
  display: grid;
  gap: 8px;
}
.ob-items li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ece3d5;
}
.ob-th {
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--h), #4c3e6e);
}
.ob-it b {
  display: block;
  font-size: 12.5px;
  line-height: 1.25;
}
.ob-alg {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}
.ob-alg i {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fde7c9;
  color: #8a4b00;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
}
.ob-items em {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  color: #0d6d63;
}
.ob-ov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 14px 14px 16px;
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(105%);
  transition: transform 0.5s var(--ease-drawer);
}
.ob-ov.is-on {
  transform: none;
}
.ob-ov > b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-display);
  font-size: 15px;
}
.ob-ov-lang ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ob-ov-lang li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e9dfd0;
  font-size: 12px;
}
.ob-ov-lang li i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #cfc3b1;
}
.ob-ov-lang li.t {
  border-color: #0d6d63;
  background: rgba(13, 109, 99, 0.08);
}
.ob-ov-lang li.t i {
  background: #0d6d63;
  border-color: #0d6d63;
}
.ob-ov-lang.is-on li.t {
  animation: ob-unpick 0.3s 1.2s forwards;
}
.ob-ov-lang.is-on li.pick {
  animation: ob-dopick 0.3s 1.2s forwards;
}
@keyframes ob-unpick {
  to {
    border-color: #e9dfd0;
    background: transparent;
  }
}
@keyframes ob-dopick {
  to {
    border-color: #0d6d63;
    background: rgba(13, 109, 99, 0.08);
  }
}
.ob-ov-lang.is-on li.t i {
  animation: ob-unradio 0.3s 1.2s forwards;
}
.ob-ov-lang.is-on li.pick i {
  animation: ob-radio 0.3s 1.2s forwards;
}
@keyframes ob-unradio {
  to {
    background: transparent;
    border-color: #cfc3b1;
  }
}
@keyframes ob-radio {
  to {
    background: #0d6d63;
    border-color: #0d6d63;
  }
}
.ob-ov-mod {
  top: 92px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ob-mimg {
  flex: none;
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--h), #4c3e6e);
}
.ob-mh2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ob-mh2 b {
  font-family: var(--f-display);
  font-size: 15px;
}
.ob-mh2 em {
  font-style: normal;
  font-weight: 700;
  color: #0d6d63;
}
.ob-ov-mod small {
  color: #6f6257;
  font-size: 11px;
}
.ob-ov-mod h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6257;
}
.ob-ov-mod h4 span {
  padding: 1px 6px;
  border-radius: 99px;
  background: #efe6d8;
  letter-spacing: 0;
}
.ob-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ob-tags i {
  padding: 3px 7px;
  border-radius: 99px;
  background: #f1eadf;
  color: #8b7d6e;
  font-style: normal;
  font-size: 9.5px;
}
.ob-ov-mod.is-on .ob-tags i.on {
  animation: ob-tagon 0.4s 0.7s both;
}
.ob-ov-mod.is-on .ob-tags i.on:nth-of-type(n + 5) {
  animation-delay: 1.1s;
}
@keyframes ob-tagon {
  to {
    background: #0d6d63;
    color: #fff;
  }
}
.ob-madd {
  margin-top: auto;
  padding: 10px;
  border-radius: 12px;
  background: #0d6d63;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}
.ob-ov-cart {
  display: grid;
  gap: 8px;
}
.ob-ov-cart > b {
  margin: 0;
}
.ob-ov-cart li {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid #ece3d5;
  border-radius: 10px;
  font-size: 12px;
}
.ob-ov-cart li i {
  font-style: normal;
  color: #6f6257;
}
.ob-cur {
  display: flex;
  gap: 6px;
}
.ob-cur i {
  padding: 5px 11px;
  border-radius: 99px;
  background: #efe6d8;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 10px;
}
.ob-cur i.t {
  background: #0d6d63;
  color: #fff;
}
.ob-ov-cart.is-on .ob-cur i.t {
  animation: ob-cur-off 0.3s 1s forwards;
}
.ob-ov-cart.is-on .ob-cur i.on {
  animation: ob-cur-on 0.3s 1s forwards;
}
@keyframes ob-cur-off {
  to {
    background: #efe6d8;
    color: #211a15;
  }
}
@keyframes ob-cur-on {
  to {
    background: #0d6d63;
    color: #fff;
  }
}
.ob-ctot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f6efe4;
}
.ob-ctot b {
  display: inline-grid;
  font-size: 15px;
  text-align: right;
}
.ob-ctot b > * {
  grid-area: 1 / 1;
  font-style: normal;
}
.ob-ctot b i {
  opacity: 0;
}
.ob-ctot b s {
  color: #6f6257;
}
.ob-ov-cart.is-on .ob-ctot b s {
  animation: ob-out 0.3s 1s both;
}
.ob-ov-cart.is-on .ob-ctot b i {
  animation: ob-in 0.3s 1s both;
}
.ob-ov-cart p {
  margin: 0;
  color: #6f6257;
  font-size: 10.5px;
  line-height: 1.4;
}
.ob-mtabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ob-mt {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--bd-2);
  background: var(--card);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fg-2);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ob-mt.is-on {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.ob-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 32px 0 22px;
}
.ob-tools li {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--bd);
  border-radius: 18px;
  background: var(--card);
}
.ob-tools li > b {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.ob-tools li > small {
  color: var(--fg-3);
  font-size: 0.82rem;
  line-height: 1.4;
}
.ob-tq,
.ob-tkq {
  --sh: 56px;
  position: relative;
  display: block;
  width: 78px;
  padding: 7px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: #fff;
  color: #0b1140;
  overflow: hidden;
}
.ob-tq .scan,
.ob-tkq .scan {
  height: 18px;
  animation: ob-scanline 2.8s var(--ease-in-out) infinite alternate;
}
.ob-ts2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 62px;
  aspect-ratio: 210 / 297;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: #fff;
}
.ob-ts2 i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: #0b1140;
  animation: ob-cell 3.6s ease-in-out infinite;
  animation-delay: calc(var(--n) * 0.14s);
}
@keyframes ob-cell {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}
.ob-tv {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 78px;
}
.ob-tv strong {
  font-family: var(--f-display);
  font-size: 1.9rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
}
.ob-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.ob-bars i {
  width: 6px;
  height: var(--h, 40%);
  border-radius: 2px;
  background: var(--grad-btn);
  transform-origin: bottom;
  animation: ob-bar 2.6s ease-in-out infinite alternate;
}
.ob-bars i:nth-child(1) {
  --h: 30%;
}
.ob-bars i:nth-child(2) {
  --h: 46%;
  animation-delay: 0.2s;
}
.ob-bars i:nth-child(3) {
  --h: 40%;
  animation-delay: 0.4s;
}
.ob-bars i:nth-child(4) {
  --h: 66%;
  animation-delay: 0.6s;
}
.ob-bars i:nth-child(5) {
  --h: 58%;
  animation-delay: 0.8s;
}
.ob-bars i:nth-child(6) {
  --h: 80%;
  animation-delay: 1s;
}
.ob-bars i:nth-child(7) {
  --h: 100%;
  animation-delay: 1.2s;
}
@keyframes ob-bar {
  to {
    transform: scaleY(0.6);
  }
}
.ob-slug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 0.78rem;
  text-transform: none;
}
.ob-slug > span {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  background: var(--card);
  letter-spacing: 0;
}
.ob-slug s {
  color: var(--fg-3);
}
.ob-slug b {
  color: var(--accent);
  font-weight: 600;
}
.ob-slug i {
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--grad-btn);
  color: #fff;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.ob-slug small {
  flex-basis: 100%;
  color: var(--fg-3);
  font-family: var(--f-body);
  font-size: 0.86rem;
  letter-spacing: 0;
}
@media (max-width: 960px) {
  .ob-menugrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .ob-tools {
    grid-template-columns: 1fr;
  }
  .ob-tools li {
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: center;
  }
  .ob-tools li > span {
    grid-row: 1 / 3;
  }
  .ob-tools li > b {
    margin-top: 0;
    align-self: end;
  }
  .ob-tv {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
  }
}
.ob-ticket {
  overflow: clip;
}
.ob-ticket .wrap {
  position: relative;
  z-index: 2;
}
.ob-tkgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
.ob-ticket .sec-head h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
}
.ob-ticket .sec-head {
  margin-bottom: 26px;
}
.ob-manage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--bd);
  color: var(--fg-2);
  font-size: 0.94rem;
}
.ob-manage .ico {
  flex: none;
  margin-top: 4px;
  color: var(--cyan);
}
.ob-tkviz {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 16px;
  align-items: start;
}
.ob-tkt {
  overflow: hidden;
  border-radius: 20px;
  background: #fffdfb;
  color: #211a15;
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.7);
}
.ob-tkt-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #0d6d63;
  color: #fff;
}
.ob-tkt-h b {
  font-family: var(--f-display);
  letter-spacing: 0.02em;
}
.ob-tkt-b {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}
.ob-tkq {
  --sh: 74px;
  width: 92px;
  padding: 8px;
  border-color: #e6ddd0;
}
.ob-tkd {
  display: grid;
  align-content: start;
  gap: 3px;
}
.ob-tkd b {
  font-size: 0.92rem;
  line-height: 1.25;
}
.ob-tkd small {
  color: #6f6257;
  font-size: 0.76rem;
}
.ob-tks {
  display: inline-grid;
  justify-self: start;
  margin-top: 6px;
}
.ob-tks i {
  grid-area: 1 / 1;
  padding: 3px 10px;
  border-radius: 99px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
}
.ob-tks .v {
  background: #dcfce7;
  color: #166534;
  animation: ob-tkv 8s linear infinite;
}
.ob-tks .x {
  background: #fee2e2;
  color: #b91c1c;
  opacity: 0;
  animation: ob-tkx 8s linear infinite;
}
@keyframes ob-tkv {
  0%,
  70% {
    opacity: 1;
  }
  74%,
  96% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ob-tkx {
  0%,
  72% {
    opacity: 0;
  }
  76%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ob-life {
  padding: 0 16px 14px;
  color: #6f6257;
  font-size: 0.74rem;
}
.ob-life em {
  margin-left: 6px;
  font-style: normal;
  font-weight: 600;
  color: #211a15;
}
.ob-track {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 99px;
  background: #eadfce;
  overflow: hidden;
}
.ob-track i {
  display: block;
  height: 100%;
  background: #0d6d63;
  transform-origin: left;
  animation: ob-life 8s linear infinite;
}
@keyframes ob-life {
  0% {
    transform: scaleX(1);
  }
  72%,
  100% {
    transform: scaleX(0.03);
  }
}
.ob-scan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  background: #f4ede2;
  color: #6f6257;
  font-size: 0.76rem;
}
.ob-trf {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--bd-2);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(20, 28, 90, 0.7), rgba(8, 12, 40, 0.9));
}
.ob-trf-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ob-trf-h b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  letter-spacing: 0.02em;
}
.ob-trf-h .chip .dot {
  animation: pulse 2s ease-out infinite;
}
.ob-map {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0d1548;
}
.ob-mg path {
  fill: none;
  stroke: rgba(160, 176, 255, 0.13);
  stroke-width: 1;
}
.ob-rt0 {
  fill: none;
  stroke: rgba(160, 176, 255, 0.3);
  stroke-width: 2;
  stroke-dasharray: 4 5;
}
.ob-rt1 {
  fill: none;
  stroke: #37e6a0;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ob-route 9s linear infinite;
}
@keyframes ob-route {
  0% {
    stroke-dashoffset: 100;
  }
  88%,
  100% {
    stroke-dashoffset: 0;
  }
}
.ob-pin circle:first-child {
  fill: #3b56f5;
}
.ob-pin path {
  fill: #fff;
}
.ob-pin circle:last-child {
  fill: #3b56f5;
}
.ob-van circle {
  fill: #fff;
}
.ob-van svg {
  color: #0b1140;
}
.ob-eta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(55, 230, 160, 0.08);
  border: 1px solid rgba(55, 230, 160, 0.25);
}
.ob-eta-l {
  font-size: 0.66rem;
  color: #37e6a0;
  letter-spacing: 0.12em;
}
.ob-eta-v {
  display: inline-grid;
}
.ob-eta-v i {
  grid-area: 1 / 1;
  font-style: normal;
  font-weight: 600;
  font-size: 0.86rem;
  color: #d9ffee;
  opacity: 0;
}
.ob-eta-v i:nth-child(1) {
  animation: ob-e1 9s linear infinite;
}
.ob-eta-v i:nth-child(2) {
  animation: ob-e2 9s linear infinite;
}
.ob-eta-v i:nth-child(3) {
  animation: ob-e3 9s linear infinite;
}
@keyframes ob-e1 {
  0%,
  40% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}
@keyframes ob-e2 {
  0%,
  40% {
    opacity: 0;
  }
  46%,
  80% {
    opacity: 1;
  }
  86%,
  100% {
    opacity: 0;
  }
}
@keyframes ob-e3 {
  0%,
  80% {
    opacity: 0;
  }
  86%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ob-trows {
  display: grid;
  gap: 8px;
}
.ob-trows li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: baseline;
}
.ob-trows span {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.ob-trows b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.98rem;
}
.ob-trows small {
  grid-column: 2;
  color: var(--fg-2);
  font-size: 0.82rem;
}
@media (max-width: 1000px) {
  .ob-tkgrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .ob-tkviz {
    grid-template-columns: 1fr;
  }
}
.ob-lang {
  border-top-left-radius: clamp(28px, 4vw, 64px);
  border-top-right-radius: clamp(28px, 4vw, 64px);
  margin-top: calc(clamp(28px, 4vw, 64px) * -1);
  z-index: 2;
}
.ob-lang .sec-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  max-width: 20ch;
}
.ob-langgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: stretch;
}
.ob-langbox,
.ob-themebox {
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid var(--bd);
  border-radius: 26px;
  background: var(--card);
}
.ob-langtags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ob-lbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.ob-lb {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 2px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--bd-2);
  background: var(--card-2);
  text-align: start;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ob-lb i {
  font-size: 0.62rem;
  font-style: normal;
  color: var(--fg-3);
  text-transform: uppercase;
}
.ob-lb span {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.9rem;
}
.ob-lb.is-on {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.ob-lb.is-on i {
  color: #7fe3f7;
}
.ob-lstage {
  position: relative;
  min-height: 322px;
  padding: 16px 18px;
  border: 1px solid var(--bd);
  border-radius: 18px;
  background: linear-gradient(160deg, #fffdfb, #f3ede4);
  color: #211a15;
  overflow: hidden;
}
.ob-lcap {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6257;
}
.ob-lp {
  position: absolute;
  inset: 40px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.ob-lp[dir='rtl'] {
  transform: translateX(-16px);
}
.ob-lp.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.ob-lp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ob-lp-tour {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: #0d6d63;
}
.ob-rtlb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(13, 109, 99, 0.12);
  color: #0d6d63;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ob-lp.is-on .ob-rtlb {
  animation: ob-pop 0.5s 0.3s both;
}
.ob-lp-q {
  font-family: var(--f-display);
  font-size: 1.32rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #211a15;
}
.ob-lp-days {
  display: flex;
  gap: 8px;
}
.ob-lp-days i {
  display: grid;
  place-items: center;
  flex: 1;
  height: 38px;
  border-radius: 10px;
  background: #f0e9de;
  font-style: normal;
  font-size: 0.85rem;
}
.ob-lp-days i.on {
  background: #0d6d63;
  color: #fff;
}
.ob-lp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6ddd0;
  font-size: 0.95rem;
}
.ob-lp-row.tot b {
  font-size: 1.2rem;
}
.ob-lp .ob-stp i {
  background: #fff;
  border-color: #e6ddd0;
  color: #6f6257;
}
.ob-lp .ob-stp b {
  min-width: 14px;
  text-align: center;
}
.ob-lp-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  margin-top: auto;
  padding: 0 16px;
  border-radius: 12px;
  background: #0d6d63;
  color: #fff;
  font-weight: 600;
}
.ob-lp[dir='rtl'] .ob-arr {
  transform: scaleX(-1);
}
.ob-themehead {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}
.ob-themehead h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: -0.03em;
}
.ob-themehead p {
  margin-top: 8px;
  color: var(--fg-2);
  font-size: 0.95rem;
}
.ob-seg2 {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: max-content;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--bd-2);
  background: var(--card-2);
}
.ob-seg2 button {
  position: relative;
  z-index: 1;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fg-2);
  transition: color 0.3s var(--ease-out);
}
.ob-seg2 button.is-on {
  color: #fff;
}
.ob-seg2 i {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--ink-900);
  transition: transform 0.4s var(--ease-out);
}
.ob-themebox[data-i='1'] .ob-seg2 i {
  transform: translateX(100%);
}
.ob-tbrowser {
  background: rgba(4, 6, 26, 0.85);
}
.ob-tstage {
  position: relative;
  height: 304px;
}
.ob-th-classic,
.ob-th-modern {
  position: absolute;
  inset: 0;
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.ob-th-classic.is-on,
.ob-th-modern.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.ob-th-classic {
  background: #f7f8fa;
  color: #1a1d23;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.ob-cl-h b {
  font-size: 15px;
  font-weight: 700;
}
.ob-cl-steps {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}
.ob-cl-steps i {
  padding: 4px 10px;
  border-radius: 99px;
  background: #eef1f5;
  color: #6b7280;
  font-style: normal;
  font-size: 10.5px;
}
.ob-cl-steps i.on {
  background: #0f6fd6;
  color: #fff;
}
.ob-cl-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
.ob-th-classic .skel {
  height: 10px;
  background: linear-gradient(90deg, #eceff4, #dde2eb, #eceff4);
  background-size: 200% 100%;
}
.ob-cl-cal,
.ob-md-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.ob-cl-cal i {
  height: 26px;
  border-radius: 6px;
  background: #f1f3f6;
}
.ob-cl-cal i.on {
  background: #0f6fd6;
}
.ob-cl-btn {
  height: 36px;
  border-radius: 8px;
  background: #0f6fd6;
}
.ob-th-modern {
  background: radial-gradient(62% 42% at 78% 8%, rgba(255, 214, 158, 0.7), rgba(255, 214, 158, 0) 62%),
    linear-gradient(178deg, #2b3a6b 0%, #4a4581 16%, #8a5289 34%, #c96b6f 52%, #f0a35e 68%, #a45a68 82%, #4c3e6e 100%);
}
.ob-md-h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.ob-md-h b {
  font-family: var(--f-display);
  font-size: 0.95rem;
}
.ob-md-h .ob-logo {
  background: #fffdfb;
  color: #0d6d63;
}
.ob-md-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 22px;
  background: #fffdfb;
  box-shadow: 0 30px 60px -20px rgba(35, 20, 10, 0.5);
}
.ob-md-prog {
  display: flex;
  gap: 5px;
}
.ob-md-prog i {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: #e6ddd0;
}
.ob-md-prog i.on {
  background: #0d6d63;
}
.ob-th-modern .skel {
  height: 10px;
  background: linear-gradient(90deg, #f0e9de, #e6ddd0, #f0e9de);
  background-size: 200% 100%;
}
.ob-md-cal i {
  height: 26px;
  border-radius: 8px;
  background: rgba(13, 109, 99, 0.1);
}
.ob-md-cal i.on {
  background: #0d6d63;
}
.ob-md-btn {
  height: 38px;
  border-radius: 12px;
  background: #0d6d63;
}
@media (max-width: 960px) {
  .ob-langgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .ob-lbs {
    grid-template-columns: 1fr 1fr;
  }
}
.ob-ctlgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.ob-control .sec-head h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
}
.ob-ctl {
  display: grid;
}
.ob-ctl li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--bd);
}
.ob-ctl li:last-child {
  border-bottom: 1px solid var(--bd);
}
.ob-ctl h3 {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}
.ob-ctl p {
  margin-top: 6px;
  color: var(--fg-2);
  font-size: 0.96rem;
}
.ob-ci {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--grad-soft);
  border: 1px solid var(--bd);
}
.ob-pub {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(20, 28, 90, 0.6), rgba(8, 12, 40, 0.9));
  border-color: var(--bd-2);
}
.ob-pub-h {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ob-pub-h b {
  font-family: var(--f-display);
  font-size: 1.15rem;
}
.ob-pub-s {
  display: inline-grid;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ob-pub-s i {
  grid-area: 1 / 1;
  text-align: right;
  font-style: normal;
}
.ob-pub-s .o {
  color: #ffc36b;
  animation: ob-po 10s linear infinite;
}
.ob-pub-s .n {
  color: #37e6a0;
  opacity: 0;
  animation: ob-pn 10s linear infinite;
}
@keyframes ob-po {
  0%,
  42% {
    opacity: 1;
  }
  46%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ob-pn {
  0%,
  44% {
    opacity: 0;
  }
  48%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ob-sw {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  animation: ob-swbg 10s linear infinite;
}
.ob-sw i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  animation: ob-swk 10s var(--ease-out) infinite;
}
@keyframes ob-swbg {
  0%,
  44% {
    background: rgba(255, 255, 255, 0.14);
  }
  48%,
  94% {
    background: #12b886;
  }
  100% {
    background: rgba(255, 255, 255, 0.14);
  }
}
@keyframes ob-swk {
  0%,
  44% {
    transform: none;
  }
  50%,
  94% {
    transform: translateX(20px);
  }
  100% {
    transform: none;
  }
}
.ob-chk {
  display: grid;
  gap: 10px;
}
.ob-chk li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-2);
  font-size: 0.94rem;
}
.ob-cbx {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--bd-2);
  color: transparent;
}
.ob-chk .c1 .ob-cbx {
  animation: ob-c1 10s linear infinite;
}
.ob-chk .c2 .ob-cbx {
  animation: ob-c2 10s linear infinite;
}
.ob-chk .c3 .ob-cbx {
  border-color: #ffc36b;
  animation: ob-c3 10s linear infinite;
}
.ob-chk .c4 .ob-cbx {
  animation: ob-c4 10s linear infinite;
}
@keyframes ob-c1 {
  0%,
  6% {
    background: transparent;
    border-color: var(--bd-2);
    color: transparent;
  }
  10%,
  94% {
    background: #37e6a0;
    border-color: #37e6a0;
    color: #04061a;
  }
  100% {
    background: transparent;
    border-color: var(--bd-2);
    color: transparent;
  }
}
@keyframes ob-c2 {
  0%,
  16% {
    background: transparent;
    border-color: var(--bd-2);
    color: transparent;
  }
  20%,
  94% {
    background: #37e6a0;
    border-color: #37e6a0;
    color: #04061a;
  }
  100% {
    background: transparent;
    border-color: var(--bd-2);
    color: transparent;
  }
}
@keyframes ob-c3 {
  0%,
  30% {
    background: transparent;
    border-color: #ffc36b;
    color: transparent;
  }
  34%,
  94% {
    background: #37e6a0;
    border-color: #37e6a0;
    color: #04061a;
  }
  100% {
    background: transparent;
    border-color: #ffc36b;
    color: transparent;
  }
}
@keyframes ob-c4 {
  0%,
  26% {
    background: transparent;
    border-color: var(--bd-2);
    color: transparent;
  }
  30%,
  94% {
    background: #37e6a0;
    border-color: #37e6a0;
    color: #04061a;
  }
  100% {
    background: transparent;
    border-color: var(--bd-2);
    color: transparent;
  }
}
.ob-url2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(55, 230, 160, 0.08);
  border: 1px solid rgba(55, 230, 160, 0.3);
  color: #37e6a0;
  font-size: 0.74rem;
  opacity: 0;
  animation: ob-pn 10s linear infinite;
}
.ob-vis small {
  display: block;
  margin-bottom: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.ob-vis ul {
  display: grid;
  gap: 6px;
}
.ob-vis li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-2);
  font-size: 0.9rem;
}
.ob-eye {
  display: inline-flex;
  color: var(--cyan);
}
.ob-vis .v2 {
  animation: ob-vhide 10s linear infinite;
}
@keyframes ob-vhide {
  0%,
  56% {
    opacity: 1;
  }
  62%,
  84% {
    opacity: 0.4;
  }
  90%,
  100% {
    opacity: 1;
  }
}
.ob-vis .v2 .ob-eye {
  animation: ob-veye 10s linear infinite;
}
@keyframes ob-veye {
  0%,
  56% {
    color: var(--cyan);
  }
  62%,
  84% {
    color: var(--fg-3);
  }
  90%,
  100% {
    color: var(--cyan);
  }
}
.ob-promo {
  justify-self: start;
}
@media (max-width: 960px) {
  .ob-ctlgrid {
    grid-template-columns: 1fr;
  }
  .ob-pub {
    position: relative;
    top: 0;
    justify-self: stretch;
    max-width: none;
  }
}
.ob-faq h2 {
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
}
body[data-page='online-booking'] .sec-head h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
}
@media (prefers-reduced-motion: reduce) {
  .ob-type,
  .ob-urlt i {
    max-width: 26ch;
  }
  .ob-cert,
  .ob-lockic,
  .ob-fs,
  .ob-code-ok,
  .ob-tot-v b,
  .ob-rgood,
  .ob-url2,
  .ob-fh i:nth-child(3),
  .ob-eta-v i:nth-child(1),
  .ob-pub-s .n {
    opacity: 1;
  }
  .ob-pub-s .o,
  .ob-tot-v s,
  .ob-fh i:nth-child(1) {
    opacity: 0;
  }
  .ob-sframe {
    height: 306px;
  }
  .ob-r-fg {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  .ob-ring-dep .ob-r-fg {
    stroke-dashoffset: 70;
  }
  .ob-rl i::after {
    transform: scaleX(1);
  }
  .ob-rt1 {
    stroke-dashoffset: 0;
  }
  .ob-okv circle,
  .ob-okv path {
    stroke-dashoffset: 0;
  }
  .ob-tbox svg {
    opacity: 1;
  }
  .ob-spin {
    display: none;
  }
  .ob-ts-t i:first-child {
    opacity: 0;
  }
  .ob-ts-t i:last-child {
    opacity: 1;
  }
}
@media (max-width: 560px) {
  .ob-lstage {
    min-height: 344px;
  }
}
body[data-page='partners'] [data-anim]:not(.is-live) * {
  animation-play-state: paused !important;
}
body[data-page='partners'] .page-hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  max-width: 14ch;
}
body[data-page='partners'] .mono {
  text-transform: none;
}
@keyframes pp-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes pp-grow {
  from {
    transform: scaleY(0.1);
  }
}
@keyframes pp-typing {
  to {
    max-width: 26ch;
  }
}
@keyframes pp-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.pp-app {
  --pa: #0b1020;
  --pc: #131a30;
  --pl: #232c4a;
  --pt: #e6ebff;
  --pm: #8b95b8;
  --pp: #8ea2ff;
  display: flex;
  flex-direction: column;
  background: var(--pa);
  color: var(--pt);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
}
.pp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pl);
  background: #111832;
}
.pp-top b {
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--pp);
}
.pp-firm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pm);
}
.pp-tm {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 1px solid var(--pl);
  border-radius: 8px;
  color: var(--pm);
}
.pp-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 316px;
  padding: 14px;
}
.pp-nav {
  display: flex;
  border-top: 1px solid var(--pl);
  background: #111832;
}
.pp-n {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  color: var(--pm);
}
.pp-n small {
  font-size: 9.5px;
  white-space: nowrap;
}
.pp-n.on {
  color: var(--pp);
}
.pp-navc .pp-n.on {
  color: var(--pm);
}
.pp-browser[data-i='0'] .pp-n.n1,
.pp-browser[data-i='1'] .pp-n.n1,
.pp-browser[data-i='2'] .pp-n.n0 {
  color: var(--pp);
}
.pp-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.pp-h .chip {
  padding: 3px 9px;
  font-size: 0.62rem;
}
.pp-fg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pp-f {
  min-width: 0;
  padding: 6px 10px 7px;
  border: 1px solid var(--pl);
  border-radius: 9px;
  background: var(--pc);
}
.pp-f small {
  display: block;
  font-size: 9.5px;
  color: var(--pm);
}
.pp-f > span {
  display: block;
  height: 17px;
  overflow: hidden;
  white-space: nowrap;
}
.pp-f.sel > span::after {
  content: '▾';
  float: right;
  margin-left: 6px;
  color: var(--pm);
}
.pp-f i {
  font-style: normal;
}
.pp-type {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.pp-f i:not(.pp-type) {
  display: inline-block;
}
.pp-scr.is-on .pp-type {
  animation: pp-typing 1.1s steps(26, end) var(--dl, 0.4s) forwards;
}
.pp-save {
  display: grid;
  place-items: center;
  height: 36px;
  margin-top: 4px;
  border-radius: 10px;
  background: #4b6bff;
  color: #fff;
  font-weight: 600;
}
.pp-scr.is-on .pp-save {
  animation: pp-press 0.5s 3.6s var(--ease-out);
}
@keyframes pp-press {
  30% {
    transform: scale(0.96);
    box-shadow: 0 0 0 6px rgba(75, 107, 255, 0.3);
  }
}
.pp-fg2 {
  grid-template-columns: 1fr 1fr;
}
.pp-flt {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pp-flt span {
  padding: 5px 10px;
  border: 1px solid var(--pl);
  border-radius: 8px;
  background: var(--pc);
  font-size: 11px;
  color: var(--pm);
}
.pp-rows li {
  display: grid;
  grid-template-columns: 76px 92px minmax(0, 1fr) 24px 68px auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--pl);
  font-size: 12px;
}
.pp-rows .mono {
  font-size: 0.66rem;
  color: var(--pp);
}
.pp-rows .d,
.pp-rows .c {
  color: var(--pm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-rows .k,
.pp-rows .a {
  text-align: right;
}
.pp-rows .pill {
  padding: 3px 9px;
  font-size: 0.62rem;
}
.dpanel.is-on .pp-rows li,
.pp-scr.is-on .pp-rows li {
  animation: pp-rise 0.5s var(--ease-out) calc(140ms + var(--r) * 90ms) both;
}
.pp-scr.is-on .pp-rows li.pp-new {
  animation: pp-newrow 0.9s var(--ease-out) 0.4s both;
}
@keyframes pp-newrow {
  from {
    opacity: 0;
    transform: translateY(-14px);
    background: rgba(255, 195, 107, 0.2);
  }
  50% {
    opacity: 1;
    transform: none;
    background: rgba(255, 195, 107, 0.2);
  }
  to {
    opacity: 1;
    background: transparent;
  }
}
.pp-stack3 {
  position: relative;
  min-height: 288px;
}
.pp-scr {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.pp-scr.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.pp-ok2 {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 270px;
  text-align: center;
}
.pp-ok2 > svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: #37e6a0;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-ok2 > svg circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  stroke-opacity: 0.4;
}
.pp-ok2 > svg path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.pp-scr.is-on .pp-ok2 > svg circle {
  animation: pp-draw 0.7s 0.2s ease-out forwards;
}
.pp-scr.is-on .pp-ok2 > svg path {
  animation: pp-draw 0.4s 0.7s ease-out forwards;
}
.pp-ok2 b {
  max-width: 24ch;
  font-size: 13.5px;
}
.pp-ok2 > small {
  color: var(--pm);
}
.pp-stamp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--pl);
  border-radius: 12px;
  background: var(--pc);
}
.pp-stamp small {
  color: var(--pm);
}
.pp-srv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #37e6a0;
  font-size: 0.62rem;
}
.pp-scr.is-on .pp-stamp {
  animation: pp-rise 0.5s 0.9s var(--ease-out) both;
}
.pp-heroart {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
}
.pp-browser {
  box-shadow: 0 60px 100px -40px rgba(20, 24, 120, 0.75), 0 0 0 1px rgba(150, 170, 255, 0.25);
}
.pp-fc1 {
  top: -7%;
  left: -8%;
}
.pp-fc2 {
  top: 14%;
  right: -10%;
}
.pp-fc3 {
  top: 76%;
  left: -10%;
}
.pp-fc4 {
  top: 96%;
  right: -1%;
}
@media (max-width: 1100px) {
  .pp-fc1,
  .pp-fc3 {
    left: -3%;
  }
  .pp-fc2 {
    right: -3%;
  }
}
@media (max-width: 640px) {
  .pp-fc1,
  .pp-fc3,
  .pp-fc4 {
    display: none;
  }
  .pp-fc2 {
    right: 2%;
    top: auto;
    bottom: -7%;
  }
  .pp-rows li {
    grid-template-columns: 90px minmax(0, 1fr) 22px auto;
  }
  .pp-rows .d,
  .pp-rows .a {
    display: none;
  }
}
.pp-flow {
  border-top-left-radius: clamp(28px, 4vw, 64px);
  border-top-right-radius: clamp(28px, 4vw, 64px);
  margin-top: calc(clamp(28px, 4vw, 64px) * -1);
  z-index: 2;
}
.pp-flow .sec-head h2 em,
.pp-screens .sec-head h2 em,
.pp-who h2 em,
.pp-faq h2 em {
  color: #3b3fe0;
}
.pp-flowbox {
  position: relative;
}
.pp-fline {
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  border-top: 2px dashed var(--bd-2);
}
.pp-fline i {
  position: absolute;
  left: 0;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad-btn);
  box-shadow: 0 0 14px rgba(75, 76, 240, 0.7);
  animation: pp-travel 9s linear infinite;
}
@keyframes pp-travel {
  0% {
    left: 0;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
.pp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.pp-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--bd);
  border-radius: 24px;
  background: var(--card-2);
  box-shadow: 0 30px 60px -40px rgba(20, 24, 100, 0.4);
}
.pp-sn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 24px;
  margin-bottom: 4px;
  border-radius: 99px;
  background: var(--ink-900);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.pp-step h3 {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}
.pp-step p {
  color: var(--fg-2);
  font-size: 0.96rem;
}
.pp-mini {
  min-height: 156px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #232c4a;
  background: #0b1020;
  color: #e6ebff;
  font-size: 12px;
}
.pp-mi {
  margin-bottom: 8px;
  padding: 6px 10px 7px;
  border: 1px solid #232c4a;
  border-radius: 9px;
  background: #131a30;
}
.pp-mi small,
.pp-m2 small,
.pp-m3h small {
  display: block;
  font-size: 9.5px;
  color: #8b95b8;
}
.pp-mi > span {
  display: block;
  height: 17px;
  overflow: hidden;
  white-space: nowrap;
}
.pp-m1 .pp-type {
  animation: pp-tu 9s steps(26, end) infinite;
}
.pp-m1 .pp-mi:nth-child(2) .pp-type {
  animation-name: pp-tpw;
}
@keyframes pp-tu {
  0%,
  3% {
    max-width: 0;
  }
  12%,
  92% {
    max-width: 26ch;
  }
  100% {
    max-width: 0;
  }
}
@keyframes pp-tpw {
  0%,
  13% {
    max-width: 0;
  }
  22%,
  92% {
    max-width: 26ch;
  }
  100% {
    max-width: 0;
  }
}
.pp-mb {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 9px;
  background: #4b6bff;
  color: #fff;
  font-weight: 600;
  animation: pp-mbp 9s linear infinite;
}
@keyframes pp-mbp {
  0%,
  26% {
    transform: none;
  }
  28% {
    transform: scale(0.96);
    box-shadow: 0 0 0 5px rgba(75, 107, 255, 0.3);
  }
  32%,
  100% {
    transform: none;
    box-shadow: none;
  }
}
.pp-mn {
  font-family: var(--f-body);
  font-size: 10.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-style: normal;
  font-size: 10.5px;
  color: #8b95b8;
}
.pp-m2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pp-m2 > div {
  padding: 6px 10px;
  border: 1px solid #232c4a;
  border-radius: 9px;
  background: #131a30;
}
.pp-m2 b {
  font-weight: 500;
}
.pp-m2 .pill {
  grid-column: 1 / -1;
  justify-self: start;
  animation: pp-pillpop 9s var(--ease-out) infinite;
}
@keyframes pp-pillpop {
  0%,
  40% {
    opacity: 0;
    transform: translateY(6px);
  }
  46%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.pp-m3h {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.pp-m3h > div {
  padding: 6px 8px;
  border: 1px solid #232c4a;
  border-radius: 9px;
  background: #131a30;
}
.pp-m3h b {
  font-family: var(--f-display);
  font-size: 0.9rem;
}
.pp-m3l {
  display: block;
  height: 8px;
  margin-bottom: 7px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}
.pp-m3l.s {
  width: 62%;
}
.pp-m3 .chip {
  margin-top: 4px;
  background: #131a30;
  border-color: #232c4a;
  color: #8b95b8;
}
.pp-st1 {
  animation: pp-hl1 9s linear infinite;
}
.pp-st2 {
  animation: pp-hl2 9s linear infinite;
}
.pp-st3 {
  animation: pp-hl3 9s linear infinite;
}
@keyframes pp-hl1 {
  0%,
  30% {
    border-color: rgba(75, 76, 240, 0.55);
  }
  38%,
  100% {
    border-color: var(--bd);
  }
}
@keyframes pp-hl2 {
  0%,
  30% {
    border-color: var(--bd);
  }
  38%,
  62% {
    border-color: rgba(75, 76, 240, 0.55);
  }
  70%,
  100% {
    border-color: var(--bd);
  }
}
@keyframes pp-hl3 {
  0%,
  64% {
    border-color: var(--bd);
  }
  72%,
  96% {
    border-color: rgba(75, 76, 240, 0.55);
  }
  100% {
    border-color: var(--bd);
  }
}
@media (max-width: 900px) {
  .pp-steps {
    grid-template-columns: 1fr;
  }
  .pp-fline {
    display: none;
  }
}
.pp-rules {
  overflow: clip;
}
.pp-rules .wrap {
  position: relative;
  z-index: 2;
}
.pp-rules .sec-head h2 em,
.pp-queue .sec-head h2 em,
.pp-price .sec-head h2 em {
  color: #b7c6ff;
}
.pp-rgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.pp-rhead {
  position: sticky;
  top: 110px;
}
.pp-rhead .sec-head {
  margin-bottom: 0;
}
.pp-rhead .sec-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.6rem);
}
.pp-rule {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 250px;
  gap: 8px 20px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--bd);
}
.pp-rule:last-child {
  border-bottom: 1px solid var(--bd);
}
.pp-rn {
  align-self: start;
  padding-top: 4px;
  color: var(--cyan);
  font-size: 0.78rem;
}
.pp-rt h3 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pp-rt p {
  margin-top: 8px;
  color: var(--fg-2);
  font-size: 0.95rem;
}
.pp-rt strong {
  color: var(--fg);
}
.pp-rvw {
  min-width: 0;
}
.pp-rv {
  padding: 14px;
  border: 1px solid var(--bd);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  color: var(--fg-2);
}
.pp-sel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--bd-2);
  border-radius: 10px;
  color: var(--fg-3);
}
.pp-sel span {
  flex: 1;
}
.pp-sel .ico {
  color: #ffc36b;
}
.pp-sw {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.pp-tgl {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  animation: pp-tgl 6s linear infinite;
}
.pp-tgl b {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  animation: pp-tglk 6s var(--ease-out) infinite;
}
@keyframes pp-tgl {
  0%,
  6% {
    background: rgba(255, 255, 255, 0.14);
  }
  10%,
  46% {
    background: #12b886;
  }
  52%,
  100% {
    background: rgba(255, 255, 255, 0.14);
  }
}
@keyframes pp-tglk {
  0%,
  6% {
    transform: none;
  }
  12%,
  46% {
    transform: translateX(16px);
  }
  54%,
  100% {
    transform: none;
  }
}
.pp-out {
  display: grid;
  margin-top: 12px;
}
.pp-out .pill {
  grid-area: 1 / 1;
  justify-self: start;
}
.pp-out .p1 {
  opacity: 0;
  animation: pp-p1 6s linear infinite;
}
.pp-out .p2 {
  animation: pp-p2 6s linear infinite;
}
@keyframes pp-p1 {
  0%,
  8% {
    opacity: 0;
  }
  12%,
  46% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}
@keyframes pp-p2 {
  0%,
  8% {
    opacity: 1;
  }
  12%,
  46% {
    opacity: 0;
  }
  52%,
  100% {
    opacity: 1;
  }
}
.pp-v2 {
  display: grid;
  gap: 6px;
}
.pp-v2 li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--bd);
  border-radius: 10px;
}
.pp-v2 em {
  font-family: inherit;
  font-size: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  color: var(--fg);
}
.pp-v2 .ico {
  color: #ffc36b;
}
.pp-v2 .r1 {
  animation: pp-deny 5s linear infinite;
}
@keyframes pp-deny {
  0%,
  40% {
    border-color: var(--bd);
    transform: none;
  }
  42% {
    border-color: rgba(255, 143, 176, 0.7);
    transform: translateX(-4px);
  }
  46% {
    transform: translateX(4px);
  }
  50% {
    transform: translateX(-3px);
  }
  54%,
  60% {
    border-color: rgba(255, 143, 176, 0.7);
    transform: none;
  }
  70%,
  100% {
    border-color: var(--bd);
    transform: none;
  }
}
.pp-tl {
  position: relative;
  height: 10px;
  margin-top: 22px;
  border-radius: 99px;
  background: linear-gradient(90deg, #12b886 0 70%, #ff6b8b 70% 100%);
  opacity: 0.85;
}
.pp-mk {
  position: absolute;
  left: 70%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: #fff;
}
.pp-mk span {
  position: absolute;
  top: -20px;
  left: 50%;
  translate: -50% 0;
  padding: 1px 7px;
  border: 1px solid var(--bd-2);
  border-radius: 99px;
  background: var(--ink-800);
  font-size: 0.62rem;
  white-space: nowrap;
  color: #fff;
}
.pp-now {
  position: absolute;
  top: 50%;
  left: 2%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
  animation: pp-now 7s linear infinite;
}
@keyframes pp-now {
  0% {
    left: 2%;
  }
  92%,
  100% {
    left: 96%;
  }
}
.pp-tll {
  display: flex;
  margin-top: 10px;
  font-size: 0.66rem;
  color: var(--fg-3);
}
.pp-tll small:nth-child(1) {
  flex: 0 0 70%;
}
.pp-tll small:nth-child(2) {
  flex: 1;
}
.pp-cs {
  display: inline-grid;
  margin-top: 10px;
}
.pp-cs i {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.pp-cs .a {
  color: #37e6a0;
  border-color: rgba(55, 230, 160, 0.35);
  background: rgba(55, 230, 160, 0.1);
}
.pp-cs .b {
  color: #ff8fb0;
  border-color: rgba(255, 143, 176, 0.35);
  background: rgba(255, 143, 176, 0.1);
  opacity: 0;
}
.pp-cs3 .a {
  animation: pp-a3 7s linear infinite;
}
.pp-cs3 .b {
  animation: pp-b3 7s linear infinite;
}
@keyframes pp-a3 {
  0%,
  70% {
    opacity: 1;
  }
  73%,
  100% {
    opacity: 0;
  }
}
@keyframes pp-b3 {
  0%,
  70% {
    opacity: 0;
  }
  73%,
  100% {
    opacity: 1;
  }
}
.pp-cap {
  position: relative;
  height: 14px;
  margin-top: 22px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}
.pp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  border-radius: 99px;
  background: var(--grad-btn);
  animation: pp-fill 7s linear infinite;
}
@keyframes pp-fill {
  0%,
  4% {
    width: 8%;
  }
  60%,
  92% {
    width: 94%;
  }
  100% {
    width: 8%;
  }
}
.pp-thl {
  position: absolute;
  left: 78%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: #ffc36b;
}
.pp-thl span {
  position: absolute;
  top: -20px;
  left: 50%;
  translate: -50% 0;
  font-size: 0.62rem;
  color: #ffc36b;
}
.pp-cs4 .a {
  animation: pp-a4 7s linear infinite;
}
.pp-cs4 .b {
  animation: pp-b4 7s linear infinite;
}
@keyframes pp-a4 {
  0%,
  48% {
    opacity: 1;
  }
  51%,
  92% {
    opacity: 0;
  }
  96%,
  100% {
    opacity: 1;
  }
}
@keyframes pp-b4 {
  0%,
  48% {
    opacity: 0;
  }
  51%,
  92% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}
.pp-v5 ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.pp-v5 li {
  display: grid;
  place-items: center;
  padding: 6px 0;
  border-radius: 8px;
  border: 1px solid rgba(55, 230, 160, 0.28);
  background: rgba(55, 230, 160, 0.1);
}
.pp-v5 small {
  font-size: 0.56rem;
  color: var(--fg-3);
}
.pp-v5 b {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}
.pp-v5 li.stp {
  animation: pp-day 5s linear infinite;
}
@keyframes pp-day {
  0%,
  30% {
    border-color: rgba(55, 230, 160, 0.28);
    background: rgba(55, 230, 160, 0.1);
    opacity: 1;
  }
  38%,
  86% {
    border-color: rgba(255, 143, 176, 0.4);
    background: rgba(255, 143, 176, 0.12);
    opacity: 0.7;
  }
  94%,
  100% {
    border-color: rgba(55, 230, 160, 0.28);
    background: rgba(55, 230, 160, 0.1);
    opacity: 1;
  }
}
.pp-v5 p {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.66rem;
}
.pp-v5 p span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pp-v5 p .op {
  color: #37e6a0;
}
.pp-v5 p .stp {
  color: #ff8fb0;
}
.pp-6h {
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(75, 107, 255, 0.4);
  border-radius: 8px;
  background: rgba(75, 107, 255, 0.14);
  color: #fff;
}
.pp-v6 li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bd);
}
.pp-v6 .mono {
  font-size: 0.68rem;
}
.pp-v6 .oth {
  opacity: 0.45;
  filter: blur(1.2px);
}
.pp-v6 em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 0.66rem;
  color: var(--fg-3);
}
.pp-v6 .own {
  animation: pp-own 4s linear infinite;
}
.pp-v6 .own:nth-child(2) {
  animation-delay: 0.4s;
}
@keyframes pp-own {
  0%,
  20% {
    background: transparent;
  }
  30%,
  50% {
    background: rgba(75, 107, 255, 0.14);
  }
  62%,
  100% {
    background: transparent;
  }
}
.pp-v6 .pill {
  padding: 1px 8px;
}
@media (max-width: 1180px) {
  .pp-rule {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .pp-rvw {
    grid-column: 2;
    max-width: 380px;
    margin-top: 10px;
  }
}
@media (max-width: 900px) {
  .pp-rgrid {
    grid-template-columns: 1fr;
  }
  .pp-rhead {
    position: static;
  }
}
.pp-screens {
  border-top-left-radius: clamp(28px, 4vw, 64px);
  border-top-right-radius: clamp(28px, 4vw, 64px);
  margin-top: calc(clamp(28px, 4vw, 64px) * -1);
  z-index: 2;
}
.pp-win .win-bar span {
  text-transform: none;
  letter-spacing: 0.04em;
}
.pp-win .pp-body {
  min-height: 300px;
}
.pp-strows li.hd {
  color: var(--pm);
  font-size: 10px;
  border-bottom-color: var(--pl);
}
.pp-strows li {
  grid-template-columns: 1.2fr 0.9fr 1fr 1fr 1.1fr;
  font-size: 11.5px;
}
.pp-strows li span:nth-child(n + 3) {
  text-align: right;
}
.pp-strows .bal {
  font-weight: 600;
  color: #fff;
}
.pp-sts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pp-sts > div {
  padding: 8px 10px;
  border: 1px solid var(--pl);
  border-radius: 10px;
  background: var(--pc);
}
.pp-sts small {
  display: block;
  font-size: 9.5px;
  color: var(--pm);
}
.pp-sts b {
  font-family: var(--f-display);
  font-size: 1.05rem;
}
.pp-sts .e b {
  color: #7fe3f7;
}
.pp-rps {
  display: grid;
  gap: 8px;
}
.pp-rps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--pl);
  border-radius: 12px;
  background: var(--pc);
}
.dpanel.is-on .pp-rps li {
  animation: pp-rise 0.5s var(--ease-out) calc(140ms + var(--r) * 110ms) both;
}
.pp-rpi {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(75, 107, 255, 0.16);
  color: var(--pp);
}
.pp-rps b {
  display: block;
  font-size: 12.5px;
}
.pp-rps small {
  display: block;
  color: var(--pm);
  font-size: 10.5px;
}
.pp-mb1 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
}
.pp-mb1 i {
  width: 6px;
  height: var(--h);
  border-radius: 2px;
  background: var(--grad-btn);
  transform-origin: bottom;
}
.dpanel.is-on .pp-mb1 i {
  animation: pp-grow 0.8s var(--ease-out) 0.5s both;
}
.pp-mb2 {
  display: grid;
  gap: 4px;
  width: 64px;
}
.pp-mb2 i {
  display: block;
  height: 5px;
  width: var(--w);
  border-radius: 3px;
  background: #4b6bff;
  transform-origin: left;
}
.dpanel.is-on .pp-mb2 i {
  animation: pp-growx 0.8s var(--ease-out) 0.6s both;
}
@keyframes pp-growx {
  from {
    transform: scaleX(0.1);
  }
}
.pp-mb3 {
  text-align: right;
}
.pp-mb3 b {
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: #7fe3f7;
}
.pp-queue {
  overflow: clip;
}
.pp-queue .wrap {
  position: relative;
  z-index: 2;
}
.pp-qgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
.pp-queue .sec-head h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
}
.pp-queue .sec-head {
  margin-bottom: 26px;
}
.pp-qwin {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--bd-2);
  background: var(--ink-800);
  box-shadow: 0 50px 90px -40px rgba(20, 24, 120, 0.8);
}
.pp-qwin .win-bar span {
  text-transform: none;
  letter-spacing: 0.04em;
}
.pp-qcount {
  margin-left: auto;
}
.pp-qcount b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: rgba(255, 195, 107, 0.16);
  border: 1px solid rgba(255, 195, 107, 0.4);
  color: #ffc36b;
  font-size: 0.72rem;
}
.pp-qlist {
  position: relative;
  padding: 8px 0 14px;
}
.pp-qr {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 30px 56px 128px auto;
  gap: 10px;
  align-items: center;
  height: 64px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(150, 170, 255, 0.1);
  overflow: hidden;
}
.pp-qid {
  font-size: 0.72rem;
  color: #9aa7de;
}
.pp-qf b {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}
.pp-qf small {
  color: var(--fg-3);
  font-size: 0.74rem;
}
.pp-qk,
.pp-qm {
  text-align: right;
  font-size: 0.82rem;
  color: var(--fg-2);
}
.pp-qs {
  display: inline-grid;
}
.pp-qs .pill {
  font-style: normal;
  grid-area: 1 / 1;
  justify-self: start;
  font-size: 0.66rem;
  padding: 4px 10px;
}
.pp-qs .pk,
.pp-qs .pc {
  opacity: 0;
}
.pp-qa {
  display: flex;
  gap: 6px;
}
.pp-qa i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.pp-ok {
  color: #37e6a0;
  border-color: rgba(55, 230, 160, 0.4);
  background: rgba(55, 230, 160, 0.08);
}
.pp-no {
  color: #ff8fb0;
  border-color: rgba(255, 143, 176, 0.4);
  background: rgba(255, 143, 176, 0.08);
}
.pp-qr1 {
  animation: pp-r1 12s var(--ease-out) infinite;
}
.pp-qr2 {
  animation: pp-r2 12s var(--ease-out) infinite;
}
.pp-qr1 .pw {
  animation: pp-r1w 12s linear infinite;
}
.pp-qr1 .pk {
  animation: pp-r1k 12s linear infinite;
}
.pp-qr2 .pw {
  animation: pp-r2w 12s linear infinite;
}
.pp-qr2 .pc {
  animation: pp-r2c 12s linear infinite;
}
.pp-qr1 .pp-ok {
  animation: pp-b1 12s linear infinite;
}
.pp-qr2 .pp-no {
  animation: pp-b2 12s linear infinite;
}
@keyframes pp-r1 {
  0%,
  44% {
    height: 64px;
    opacity: 1;
  }
  50%,
  94% {
    height: 0;
    opacity: 0;
    border-bottom-width: 0;
  }
  100% {
    height: 64px;
    opacity: 1;
  }
}
@keyframes pp-r2 {
  0%,
  78% {
    height: 64px;
    opacity: 1;
  }
  84%,
  94% {
    height: 0;
    opacity: 0;
    border-bottom-width: 0;
  }
  100% {
    height: 64px;
    opacity: 1;
  }
}
@keyframes pp-r1w {
  0%,
  30% {
    opacity: 1;
  }
  32%,
  100% {
    opacity: 0;
  }
}
@keyframes pp-r1k {
  0%,
  30% {
    opacity: 0;
  }
  32%,
  46% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes pp-r2w {
  0%,
  64% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}
@keyframes pp-r2c {
  0%,
  64% {
    opacity: 0;
  }
  66%,
  80% {
    opacity: 1;
  }
  84%,
  100% {
    opacity: 0;
  }
}
@keyframes pp-b1 {
  0%,
  27% {
    background: rgba(55, 230, 160, 0.08);
    transform: none;
  }
  30% {
    background: rgba(55, 230, 160, 0.35);
    transform: scale(0.94);
  }
  36%,
  100% {
    background: rgba(55, 230, 160, 0.08);
    transform: none;
  }
}
@keyframes pp-b2 {
  0%,
  61% {
    background: rgba(255, 143, 176, 0.08);
    transform: none;
  }
  64% {
    background: rgba(255, 143, 176, 0.35);
    transform: scale(0.94);
  }
  70%,
  100% {
    background: rgba(255, 143, 176, 0.08);
    transform: none;
  }
}
.pp-cur {
  position: absolute;
  right: 98px;
  top: 44px;
  z-index: 3;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  animation: pp-cur 12s var(--ease-in-out) infinite;
}
@keyframes pp-cur {
  0% {
    opacity: 0;
    right: 40%;
    top: 20px;
    transform: none;
  }
  8% {
    opacity: 1;
    right: 40%;
    top: 30px;
  }
  20%,
  29% {
    opacity: 1;
    right: 98px;
    top: 44px;
    transform: none;
  }
  30% {
    transform: scale(0.85);
  }
  33%,
  50% {
    opacity: 1;
    right: 98px;
    top: 44px;
    transform: none;
  }
  58%,
  63% {
    opacity: 1;
    right: 22px;
    top: 44px;
    transform: none;
  }
  64% {
    transform: scale(0.85);
  }
  67%,
  76% {
    opacity: 1;
    right: 22px;
    top: 44px;
    transform: none;
  }
  86%,
  100% {
    opacity: 0;
    right: 30%;
    top: 130px;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .pp-qgrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .pp-cur {
    display: none;
  }
  .pp-qr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'f s' 'a a';
    height: 92px;
    row-gap: 8px;
    align-content: center;
  }
  .pp-qid,
  .pp-qk,
  .pp-qm {
    display: none;
  }
  .pp-qf {
    grid-area: f;
  }
  .pp-qs {
    grid-area: s;
  }
  .pp-qa {
    grid-area: a;
  }
  @keyframes pp-r1 {
    0%,
    44% {
      height: 92px;
      opacity: 1;
    }
    50%,
    94% {
      height: 0;
      opacity: 0;
      border-bottom-width: 0;
    }
    100% {
      height: 92px;
      opacity: 1;
    }
  }
  @keyframes pp-r2 {
    0%,
    78% {
      height: 92px;
      opacity: 1;
    }
    84%,
    94% {
      height: 0;
      opacity: 0;
      border-bottom-width: 0;
    }
    100% {
      height: 92px;
      opacity: 1;
    }
  }
}
.pp-who {
  padding-block: clamp(64px, 8vw, 120px);
}
.pp-whogrid {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.pp-whohead h2 {
  font-size: clamp(2rem, 3.8vw, 3.3rem);
  letter-spacing: -0.04em;
}
.pp-wl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pp-wl li {
  padding: 4px clamp(16px, 2vw, 32px);
  border-left: 1px solid var(--bd);
}
.pp-wl li:first-child {
  border-left: 0;
  padding-left: 0;
}
.pp-wi {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid var(--bd);
  background: var(--grad-soft);
  color: var(--accent);
}
.pp-wl h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.pp-wl p {
  margin-top: 8px;
  color: var(--fg-2);
  font-size: 0.94rem;
}
@media (max-width: 900px) {
  .pp-whogrid {
    grid-template-columns: 1fr;
  }
  .pp-wl {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pp-wl li {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--bd);
  }
  .pp-wl li:first-child {
    padding-left: 0;
  }
}
.pp-pgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
.pp-price .sec-head h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
}
.pp-price .sec-head {
  margin-bottom: 26px;
}
.pp-sbs {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.pp-sb {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--bd-2);
  background: var(--card);
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--fg-2);
  text-align: left;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.16s var(--ease-out);
}
.pp-sb:active {
  transform: scale(0.98);
}
.pp-sb .mono {
  opacity: 0.6;
}
.pp-sb.is-on {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
}
.pp-caps {
  min-height: 4.8em;
  color: var(--fg-2);
}
.js .pp-cap2:not(.is-on) {
  display: none;
}
.pp-cap2.is-on {
  animation: pp-rise 0.5s var(--ease-out) both;
}
.pp-stackw {
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: 24px;
  border-color: var(--bd-2);
  background: linear-gradient(160deg, rgba(20, 28, 90, 0.6), rgba(8, 12, 40, 0.9));
}
.pp-pq {
  margin-bottom: 16px;
  color: var(--fg-3);
  font-size: 0.72rem;
}
.pp-scs {
  position: relative;
  min-height: 316px;
}
.pp-sc {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-left: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.pp-sc.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.pp-mk2 {
  position: absolute;
  left: 3px;
  top: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
  opacity: 0;
}
.pp-sc.is-on .pp-mk2 {
  animation: pp-mk calc(0.5s * (var(--s) + 1) + 0.4s) var(--ease-out) forwards;
}
@keyframes pp-mk {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  to {
    transform: translateY(calc(var(--s) * 78px));
    opacity: 1;
  }
}
.pp-ly {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--bd);
  background: rgba(255, 255, 255, 0.03);
}
.pp-sc.is-on .pp-ly {
  animation: pp-rise 0.5s var(--ease-out) calc(var(--n) * 0.5s) both;
}
.pp-sc.is-on .pp-ly.hit {
  animation: pp-rise 0.5s var(--ease-out) calc(var(--n) * 0.5s) both, pp-hit 0.6s var(--ease-out) calc(var(--n) * 0.5s + 0.5s) forwards;
}
@keyframes pp-hit {
  to {
    border-color: #37e6a0;
    background: rgba(55, 230, 160, 0.1);
    box-shadow: 0 0 0 4px rgba(55, 230, 160, 0.1);
  }
}
.pp-ly.skip {
  opacity: 0.42;
}
.pp-sc.is-on .pp-ly.skip {
  animation: pp-rise-skip 0.5s var(--ease-out) calc(var(--n) * 0.5s) both;
}
@keyframes pp-rise-skip {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 0.42;
    transform: none;
  }
}
.pp-lt b {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
}
.pp-lt small {
  color: var(--fg-3);
  font-size: 0.78rem;
}
.pp-lv {
  display: grid;
  justify-items: end;
  text-align: right;
}
.pp-lv b {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pp-lv em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #37e6a0;
}
.pp-lv i {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--fg-3);
}
.pp-ly.skip .pp-lv i {
  text-decoration: line-through;
}
.pp-res {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--bd-2);
  background: var(--grad-soft);
}
.pp-res small {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pp-res b {
  font-family: var(--f-display);
  font-size: 1.8rem;
  letter-spacing: -0.04em;
}
.pp-sc.is-on .pp-res {
  animation: pp-rise 0.5s var(--ease-out) calc((var(--s) + 1) * 0.5s + 0.7s) both;
}
@media (max-width: 960px) {
  .pp-pgrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .pp-lt b {
    font-size: 0.9rem;
  }
  .pp-lv b {
    font-size: 1.15rem;
  }
  .pp-ly {
    padding: 0 12px;
  }
}
.pp-faq h2 {
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
}
body[data-page='partners'] .sec-head h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
}
@media (prefers-reduced-motion: reduce) {
  .pp-type {
    max-width: 26ch;
  }
  .pp-ok2 > svg circle,
  .pp-ok2 > svg path {
    stroke-dashoffset: 0;
  }
  .pp-fline i {
    display: none;
  }
  .pp-cur {
    display: none;
  }
}