:root {
  --shibcat-red: #ff2b17;
  --shibcat-red-dark: #c91d0d;
  --shibcat-charcoal: #222222;
  --shibcat-black: #111111;
  --shibcat-white: #f7f7f5;
  --shibcat-orange: #ff8514;
}

html,
body,
.chog-page {
  background: var(--shibcat-charcoal);
}

body {
  color: var(--shibcat-black);
  font-family: "Varela Round", Arial, sans-serif;
}

button,
input,
select {
  font-family: "Varela Round", Arial, sans-serif;
}

.chog-header {
  width: min(940px, calc(100% - 40px));
  min-height: 64px;
  margin-top: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: var(--shibcat-charcoal);
  box-shadow: none;
  animation: none;
  overflow: visible;
}

.chog-header::before,
.chog-header::after {
  display: none;
}

.chog-brand {
  gap: 7px;
  color: var(--shibcat-red);
  font: 400 1.22rem/1 "Luckiest Guy", Impact, sans-serif;
}

.chog-brand img {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.chog-brand strong {
  color: var(--shibcat-red);
  text-shadow: none;
}

.chog-brand span {
  color: var(--shibcat-white);
}

.shibcat-nav {
  gap: 7px;
}

.shibcat-nav a {
  min-height: 34px;
  padding: 10px 13px 8px;
  border: 0;
  border-radius: 4px;
  color: var(--shibcat-white);
  background: var(--shibcat-black);
  font: 400 0.76rem/1 "Luckiest Guy", Impact, sans-serif;
}

.shibcat-nav a:hover,
.shibcat-nav a:focus-visible {
  color: var(--shibcat-white);
  background: var(--shibcat-red);
  outline: 2px solid var(--shibcat-white);
  outline-offset: 2px;
}

.shibcat-nav .shibcat-nav-buy {
  background: var(--shibcat-red);
}

.chog-hero {
  height: 358px;
  border: 0;
  border-radius: 0;
  background: var(--shibcat-charcoal);
  filter: none;
  overflow: hidden;
}

.chog-hero::before {
  display: none;
}

.chog-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22px;
  background: var(--shibcat-red);
}

.chog-hero-inner {
  width: min(940px, calc(100% - 40px));
  padding: 6px 0 0;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.chog-hero-inner > p {
  max-width: 520px;
  margin-top: 0;
  color: var(--shibcat-white);
  font: 400 1.04rem/1.15 "Luckiest Guy", Impact, sans-serif;
}

.chog-hero h1 {
  position: relative;
  z-index: 2;
  margin: 11px 0 -10px;
  color: var(--shibcat-red);
  font: 400 4.9rem/0.82 "Luckiest Guy", Impact, sans-serif;
  text-shadow: 4px 4px 0 #090909;
}

.chog-hero h1 span {
  display: block;
  color: var(--shibcat-white);
  font-size: 0.42em;
  text-shadow: 3px 3px 0 #090909;
}

.chog-hero-mascot {
  position: relative;
  z-index: 1;
  width: 228px;
  height: 228px;
  margin-top: -8px;
  object-fit: contain;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.24));
}

.chog-hero-inner > strong {
  position: absolute;
  z-index: 3;
  bottom: 30px;
  max-width: none;
  margin: 0;
  padding: 8px 15px 6px;
  color: var(--shibcat-white);
  background: var(--shibcat-black);
  font: 400 0.88rem/1 "Luckiest Guy", Impact, sans-serif;
  text-shadow: none;
}

.chog-hero-inner > strong::after {
  display: none;
}

.swap-shell {
  width: 100%;
  margin: 0;
  padding: 48px 20px 58px;
  background: var(--shibcat-red);
  filter: none;
}

.swap-shell::before,
.swap-shell::after {
  display: none;
}

.swap-tool {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 30px;
  border: 3px solid var(--shibcat-black);
  border-radius: 4px;
  color: var(--shibcat-black);
  background: var(--shibcat-white);
  box-shadow: 10px 10px 0 rgba(17, 17, 17, 0.22);
  animation: none;
  transition: none;
}

.swap-tool:hover {
  transform: none;
  box-shadow: 10px 10px 0 rgba(17, 17, 17, 0.22);
}

.swap-tool::after {
  inset: 9px;
  border: 1px dashed rgba(17, 17, 17, 0.32);
  border-radius: 2px;
}

.swap-kicker {
  color: var(--shibcat-red);
  font: 400 0.92rem/1.1 "Luckiest Guy", Impact, sans-serif;
}

.swap-heading h2,
.order-heading h2 {
  color: var(--shibcat-black);
  font: 400 2.16rem/1.05 "Luckiest Guy", Impact, sans-serif;
}

.swap-help-button,
.swap-availability,
.swap-trust,
.order-state {
  border: 2px solid var(--shibcat-black);
  border-radius: 3px;
  color: var(--shibcat-white);
  background: var(--shibcat-black);
  box-shadow: none;
  font-family: "Varela Round", Arial, sans-serif;
}

.swap-help-button {
  min-height: 34px;
  font-weight: 700;
}

.swap-help-button:hover,
.swap-help-button:focus-visible {
  border-color: var(--shibcat-black);
  color: var(--shibcat-black);
  background: var(--shibcat-red);
  box-shadow: none;
  outline: 2px solid var(--shibcat-black);
}

.swap-availability.is-ready,
.swap-trust.is-ready {
  color: var(--shibcat-white);
  border-color: var(--shibcat-black);
  background: #176b4a;
}

.swap-availability.is-warn,
.swap-trust.is-warn {
  color: var(--shibcat-white);
  background: var(--shibcat-red-dark);
}

.swap-mode {
  min-height: 74px;
  border: 2px solid var(--shibcat-black);
  border-radius: 3px;
  background: var(--shibcat-black);
  box-shadow: none;
}

.swap-mode button {
  border-radius: 2px;
  color: #c8c8c8;
}

.swap-mode button:hover,
.swap-mode button:focus-visible {
  color: var(--shibcat-white);
  border-color: var(--shibcat-red);
  box-shadow: none;
}

.swap-mode button[data-direction="coin_to_chog"].is-active,
.swap-mode button[data-direction="chog_to_coin"].is-active {
  color: var(--shibcat-black);
  border-color: var(--shibcat-black);
  background: var(--shibcat-red);
  box-shadow: inset 0 0 0 2px var(--shibcat-white);
}

.swap-mode button.is-active small,
.swap-mode button[data-direction="coin_to_chog"].is-active small,
.swap-mode button[data-direction="chog_to_coin"].is-active small {
  color: var(--shibcat-black);
}

.swap-mode span,
.swap-step-heading strong,
.coin-picker-copy strong,
.deposit-command strong {
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-weight: 400;
}

.swap-step {
  border-bottom-color: rgba(17, 17, 17, 0.3);
}

.swap-step::before {
  background: rgba(17, 17, 17, 0.22);
}

.swap-step-heading > span {
  border: 2px solid var(--shibcat-black);
  border-radius: 50%;
  color: var(--shibcat-white);
  background: var(--shibcat-red);
  box-shadow: none;
  animation: none;
}

.swap-step-heading strong,
.field-label {
  color: var(--shibcat-black);
}

.swap-step-heading small,
.field-help,
.swap-mode-hint {
  color: #4d4d4d;
}

.field-label {
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-weight: 400;
}

.coin-picker-main,
.address-input {
  border: 2px solid var(--shibcat-black);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: none;
}

.coin-picker-main:hover,
.coin-picker-main:focus-within,
.address-input:focus-within {
  border-color: var(--shibcat-black);
  background: #ffffff;
  box-shadow: 5px 5px 0 rgba(17, 17, 17, 0.14);
}

.coin-picker-copy strong,
.address-input input {
  color: var(--shibcat-black);
}

.coin-picker-copy small {
  color: #5f5f5f;
}

.coin-options {
  gap: 6px;
}

.coin-option {
  min-height: 46px;
  border: 2px solid transparent;
  border-radius: 3px;
  color: var(--shibcat-black);
  background: #ededeb;
}

.coin-option:hover,
.coin-option:focus-visible {
  border-color: var(--shibcat-black);
  color: var(--shibcat-black);
  box-shadow: none;
  outline: none;
}

.coin-option.is-active {
  border-color: var(--shibcat-black);
  color: var(--shibcat-white);
  background: var(--shibcat-red);
  box-shadow: none;
}

.address-input input::placeholder {
  color: #858585;
}

.address-input b {
  color: var(--shibcat-red-dark);
}

.swap-submit {
  min-height: 58px;
  border: 2px solid var(--shibcat-black);
  border-radius: 3px;
  color: var(--shibcat-white);
  background: var(--shibcat-black);
  box-shadow: none;
  font: 400 1.1rem/1 "Luckiest Guy", Impact, sans-serif;
}

.swap-submit:hover:not(:disabled),
.swap-submit:focus-visible:not(:disabled) {
  color: var(--shibcat-white);
  border-color: var(--shibcat-black);
  background: var(--shibcat-red);
  box-shadow: 5px 5px 0 rgba(17, 17, 17, 0.2);
}

.swap-submit:disabled {
  color: #8e8e8e;
  border-color: #686868;
  background: #d5d5d2;
  box-shadow: none;
}

.form-status {
  color: var(--shibcat-black);
}

.swap-help-dialog-backdrop {
  background: rgba(17, 17, 17, 0.82);
}

.swap-help-dialog-card {
  border: 3px solid var(--shibcat-black);
  border-radius: 4px;
  color: var(--shibcat-black);
  background: var(--shibcat-white);
  box-shadow: 8px 8px 0 var(--shibcat-red);
}

.swap-help-dialog-card h3 {
  color: var(--shibcat-red);
  font: 400 1.5rem/1.05 "Luckiest Guy", Impact, sans-serif;
}

.swap-help-dialog-card li {
  color: var(--shibcat-black);
}

.swap-help-close {
  border: 2px solid var(--shibcat-black);
  color: var(--shibcat-white);
  background: var(--shibcat-black);
}

.order-route,
.deposit-command,
.deposit-layout,
.order-facts,
.order-message {
  color: var(--shibcat-white);
  background: var(--shibcat-black);
  border-color: var(--shibcat-black);
}

.order-route strong,
.deposit-command strong {
  color: var(--shibcat-red);
}

.deposit-section {
  border: 2px solid var(--shibcat-black);
  border-radius: 3px;
}

.deposit-address code,
.deposit-address code.deposit-address-value.is-copyable {
  color: var(--shibcat-black);
  border-left-color: var(--shibcat-red);
  background: #ffffff;
  box-shadow: none;
}

.deposit-address button,
.order-actions button {
  border: 2px solid var(--shibcat-black);
  border-radius: 3px;
  color: var(--shibcat-white);
  background: var(--shibcat-red);
  box-shadow: none;
}

.progress-heading span,
.section-heading span,
.evidence-row strong {
  color: var(--shibcat-black);
}

.progress-heading small,
.section-heading small,
.evidence-row span,
.timeline-row {
  color: #555555;
}

.timeline-row,
.evidence-row,
.transactions a,
.transactions #transactionLinks > span {
  border-bottom-color: rgba(17, 17, 17, 0.28);
}

.chog-footer,
.shibcat-story {
  width: min(940px, calc(100% - 40px));
  border-radius: 0;
  box-shadow: none;
}

.shibcat-story {
  margin-top: 0;
  border: 0;
  border-bottom: 3px solid var(--shibcat-red);
  background: var(--shibcat-charcoal);
}

.shibcat-story p {
  color: var(--shibcat-red);
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-weight: 400;
}

.shibcat-story h2 {
  color: var(--shibcat-white);
  font: 400 1.75rem/1.05 "Luckiest Guy", Impact, sans-serif;
}

.shibcat-story span {
  color: #dedede;
}

.shibcat-story > a,
.chog-telegram-link {
  border: 0;
  border-radius: 3px;
  color: var(--shibcat-white);
  background: var(--shibcat-red);
  box-shadow: none;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-weight: 400;
}

.chog-footer {
  margin-top: 0;
  border: 0;
  padding: 22px 12px;
  background: var(--shibcat-red);
}

.chog-footer-copy p,
.chog-footer-copy small,
.chog-telegram-link span,
.chog-telegram-link strong {
  color: var(--shibcat-white);
}

.chog-footer::before,
.chog-footer::after {
  display: none;
}

.chog-brand-small span,
.chog-brand-small strong {
  color: var(--shibcat-white);
}

.chog-telegram-link:hover,
.chog-telegram-link:focus-visible {
  border: 0;
  color: var(--shibcat-white);
  background: var(--shibcat-black);
  box-shadow: none;
}

@media (max-width: 720px) {
  .chog-header {
    width: calc(100% - 28px);
  }

  .shibcat-nav a {
    display: none;
  }

  .shibcat-nav .shibcat-nav-buy {
    display: inline-flex;
    align-items: center;
  }

  .chog-hero {
    height: 330px;
  }

  .chog-hero-inner {
    width: calc(100% - 28px);
  }

  .chog-hero h1 {
    font-size: 4.2rem;
  }

  .chog-hero-mascot {
    width: 202px;
    height: 202px;
  }

  .swap-shell {
    width: 100%;
    margin: 0;
    padding: 34px 12px 42px;
  }

  .swap-tool {
    padding: 26px 20px 22px;
  }

  .shibcat-story,
  .chog-footer {
    width: calc(100% - 28px);
  }
}

@media (max-width: 520px) {
  .chog-brand {
    font-size: 1.05rem;
  }

  .chog-brand img {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .shibcat-nav a {
    padding-inline: 10px;
  }

  .chog-hero {
    height: 306px;
  }

  .chog-hero-inner > p {
    max-width: 330px;
    font-size: 0.86rem;
  }

  .chog-hero h1 {
    margin-top: 8px;
    font-size: 3.55rem;
  }

  .chog-hero-mascot {
    width: 180px;
    height: 180px;
  }

  .chog-hero-inner > strong {
    bottom: 28px;
    max-width: calc(100% - 12px);
    font-size: 0.73rem;
    white-space: normal;
  }

  .swap-tool {
    padding: 24px 16px 20px;
    box-shadow: 6px 6px 0 rgba(17, 17, 17, 0.22);
  }

  .swap-heading h2 {
    font-size: 1.74rem;
  }

  .swap-mode {
    height: auto;
    min-height: 72px;
  }

  .coin-option {
    border-width: 1px;
  }

  .shibcat-story {
    padding-inline: 14px;
  }
}