@font-face {
  font-family: "Micro 5";
  src: url("./fonts/Micro5-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Pixelify Sans";
  src: url("./fonts/PixelifySans.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("./fonts/DMMono-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --coral: #f2695c;
  --coral-deep: #d94b48;
  --turquoise: #25b9b0;
  --turquoise-deep: #08787e;
  --turquoise-dark: #07565f;
  --sand: #f4dfad;
  --sand-light: #fff3d3;
  --sand-deep: #deb868;
  --gold: #f8c95b;
  --gold-deep: #c98e24;
  --ink: #35205c;
  --ink-deep: #201338;
  --cream: #fff8e6;
  --sea-glass: #c9eee2;
  --sea-glass-deep: #9cd9cc;
  --display: "Micro 5", monospace;
  --body: "Pixelify Sans", sans-serif;
  --mono: "DM Mono", monospace;
  --pixel: 4px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--sand);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-deep);
  background:
    radial-gradient(circle at 8% 18%, rgba(37, 185, 176, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 61%, rgba(242, 105, 92, 0.13) 0 2px, transparent 3px),
    var(--sand);
  background-size: 41px 47px, 67px 59px, auto;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

body.oc-menu-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--cream);
  background: var(--coral-deep);
}

:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}

.oc-wrap {
  width: min(1240px, calc(100% - 64px));
  margin-inline: auto;
}

.oc-tide-pixels {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(90deg, transparent 0 22px, rgba(8, 120, 126, 0.13) 22px 26px, transparent 26px 52px),
    linear-gradient(0deg, transparent 0 31px, rgba(53, 32, 92, 0.07) 31px 35px, transparent 35px 70px);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

.oc-edge-bubbles {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.65;
}

.oc-edge-bubbles::before,
.oc-edge-bubbles::after {
  content: "";
  position: absolute;
  top: 22vh;
  width: 8px;
  height: 8px;
  background: var(--sea-glass);
  box-shadow:
    0 34px 0 -2px var(--turquoise),
    12px 68px 0 -1px var(--gold),
    -6px 113px 0 -3px var(--sea-glass),
    16px 163px 0 -3px var(--coral),
    4px 219px 0 -2px var(--turquoise);
  animation: oc-float 8s steps(8, end) infinite;
}

.oc-edge-bubbles::before {
  left: 14px;
}

.oc-edge-bubbles::after {
  right: 18px;
  top: 48vh;
  animation-delay: -3s;
}

@keyframes oc-float {
  0% { transform: translateY(22px); opacity: 0.25; }
  45% { opacity: 0.8; }
  100% { transform: translateY(-42px); opacity: 0; }
}

@keyframes oc-arrive {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes oc-blink {
  50% { opacity: 0.28; }
}

.oc-kicker {
  margin: 0;
  color: var(--turquoise-deep);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.oc-kicker::before {
  content: "■";
  display: inline-block;
  margin-right: 8px;
  color: var(--coral);
  font-size: 8px;
  transform: translateY(-2px);
}

.oc-mint-button,
.oc-outline-button,
.oc-max-button,
.oc-text-link,
.oc-menu-button,
.oc-menu__close,
.oc-footer__links button,
.oc-wallet-modal__head button {
  border-radius: 0;
}

.oc-mint-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 13px 23px;
  border: 3px solid var(--ink-deep);
  color: var(--ink-deep);
  background: var(--gold);
  box-shadow:
    5px 5px 0 var(--coral-deep),
    inset 0 -5px 0 rgba(201, 142, 36, 0.5);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 120ms steps(2, end), box-shadow 120ms steps(2, end), filter 120ms linear;
}

.oc-mint-button:hover:not(:disabled) {
  filter: saturate(1.08) brightness(1.03);
  transform: translate(-2px, -2px);
  box-shadow:
    7px 7px 0 var(--coral-deep),
    inset 0 -5px 0 rgba(201, 142, 36, 0.5);
}

.oc-mint-button:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow:
    2px 2px 0 var(--coral-deep),
    inset 0 -3px 0 rgba(201, 142, 36, 0.5);
}

.oc-mint-button:disabled {
  opacity: 0.46;
}

.oc-mint-button--small {
  min-height: 42px;
  padding: 9px 15px;
  border-width: 2px;
  box-shadow: 3px 3px 0 var(--coral-deep);
  font-size: 11px;
}

.oc-outline-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 2px solid currentColor;
  color: var(--ink);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 100ms linear, color 100ms linear, transform 100ms steps(2, end);
}

.oc-outline-button:hover:not(:disabled) {
  color: var(--cream);
  background: var(--ink);
  transform: translateY(-2px);
}

.oc-outline-button:disabled {
  opacity: 0.4;
}

.oc-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 3px solid var(--coral);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.oc-text-link::after {
  content: "→";
  color: var(--coral-deep);
  transition: transform 120ms steps(2, end);
}

.oc-text-link:hover::after {
  transform: translateX(5px);
}

.oc-masthead {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 4px solid var(--coral);
  color: var(--cream);
  background:
    linear-gradient(90deg, var(--turquoise-deep) 0 14px, transparent 14px calc(100% - 14px), var(--coral) calc(100% - 14px)),
    var(--ink);
}

.oc-masthead__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.oc-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 11px;
  color: var(--cream);
  text-decoration: none;
}

.oc-logo__mark {
  position: relative;
  display: block;
  width: 38px;
  height: 34px;
  filter: drop-shadow(3px 3px 0 var(--ink-deep));
}

.oc-logo__mark i {
  position: absolute;
  top: 1px;
  left: 7px;
  width: 24px;
  height: 17px;
  background: var(--coral);
  box-shadow:
    -5px 5px 0 var(--coral),
    5px 5px 0 var(--coral),
    -5px 10px 0 -1px var(--coral),
    5px 10px 0 -1px var(--coral);
}

.oc-logo__mark b {
  position: absolute;
  top: 7px;
  left: 11px;
  width: 4px;
  height: 4px;
  background: var(--ink-deep);
  box-shadow: 12px 0 0 var(--ink-deep);
}

.oc-logo__mark em {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 30px;
  height: 9px;
  background: var(--gold);
  clip-path: polygon(0 0, 13% 0, 18% 76%, 29% 0, 42% 0, 46% 82%, 57% 0, 70% 0, 74% 73%, 86% 0, 100% 0, 89% 100%, 11% 100%);
}

.oc-logo__word {
  font-family: var(--display);
  font-size: 31px;
  letter-spacing: 0.03em;
  line-height: 1;
}

.oc-logo__word strong {
  color: var(--gold);
  font-weight: 400;
}

.oc-masthead__tools {
  display: flex;
  align-items: center;
  gap: 9px;
}

.oc-menu-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 2px solid var(--turquoise);
  color: var(--cream);
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oc-menu-button:hover {
  color: var(--ink-deep);
  background: var(--turquoise);
}

.oc-menu-button > i {
  display: grid;
  width: 18px;
  gap: 3px;
}

.oc-menu-button > i b {
  display: block;
  height: 3px;
  background: currentColor;
}

.oc-masthead select {
  min-height: 42px;
  max-width: 116px;
  padding: 7px 24px 7px 9px;
  border: 2px solid var(--turquoise);
  color: var(--cream);
  background: var(--ink-deep);
  font-family: var(--mono);
  font-size: 10px;
}

.oc-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  visibility: hidden;
  place-items: stretch;
  background: rgba(32, 19, 56, 0.94);
  opacity: 0;
  transition: opacity 160ms linear, visibility 160ms linear;
}

.oc-menu.is-open {
  visibility: visible;
  opacity: 1;
}

.oc-menu__sheet {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 28px max(28px, calc((100vw - 1240px) / 2));
  color: var(--cream);
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 18px), var(--coral) calc(100% - 18px)),
    radial-gradient(circle at 84% 18%, rgba(37, 185, 176, 0.2), transparent 29%),
    var(--ink);
  overflow-y: auto;
}

.oc-menu__sheet::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 8%;
  width: 86px;
  height: 86px;
  border: 10px solid var(--turquoise);
  box-shadow:
    -36px -28px 0 -25px var(--gold),
    -64px 24px 0 -33px var(--coral),
    27px 53px 0 -35px var(--sea-glass);
  transform: rotate(8deg);
  pointer-events: none;
}

.oc-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(201, 238, 226, 0.34);
}

.oc-menu__folio {
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.oc-menu__close {
  min-height: 43px;
  padding: 8px 16px;
  border: 2px solid var(--coral);
  color: var(--cream);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}

.oc-menu__close:hover {
  color: var(--ink-deep);
  background: var(--coral);
}

.oc-menu__title {
  margin: 22px 0 3px;
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(64px, 10vw, 132px);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 0.9;
}

.oc-menu__nav {
  display: grid;
  max-width: 1040px;
  margin-top: 16px;
  border-top: 3px solid var(--turquoise);
}

.oc-menu__nav a {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 9px 0 6px;
  border-bottom: 1px solid rgba(201, 238, 226, 0.25);
  text-decoration: none;
}

.oc-menu__nav a span {
  color: var(--coral);
  font-family: var(--mono);
  font-size: 10px;
}

.oc-menu__nav a strong {
  font-family: var(--display);
  font-size: clamp(31px, 4.5vw, 57px);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 0.98;
  transition: color 100ms linear, transform 100ms steps(2, end);
}

.oc-menu__nav a:hover strong {
  color: var(--gold);
  transform: translateX(10px);
}

.oc-menu__foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oc-cover {
  position: relative;
  padding: 35px 0 0;
  border-bottom: 4px solid var(--ink);
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(37, 185, 176, 0.12) 72% 73%, transparent 73%),
    var(--sand-light);
  overflow: hidden;
}

.oc-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9%;
  width: 160px;
  height: 9px;
  background: var(--coral);
  box-shadow: 180px 0 0 var(--turquoise), 360px 0 0 var(--gold);
}

.oc-cover__folio {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ink);
}

.oc-cover__number {
  color: var(--ink);
  font-family: var(--display);
  font-size: 25px;
  line-height: 0.75;
}

.oc-cover__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  padding: clamp(44px, 7vw, 82px) 0 50px;
}

.oc-cover__copy {
  position: relative;
  z-index: 2;
  animation: oc-arrive 420ms steps(5, end) both;
}

.oc-cover__copy h1 {
  max-width: 690px;
  margin: 0 0 17px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(75px, 9.2vw, 142px);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.79;
  text-transform: uppercase;
  text-wrap: balance;
}

.oc-cover__copy h1 span {
  display: block;
}

.oc-cover__copy h1 span:last-child {
  color: var(--coral-deep);
  text-shadow: 5px 5px 0 var(--gold);
}

.oc-cover__lede {
  max-width: 630px;
  margin: 0;
  color: #312546;
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.55;
}

.oc-cover__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 27px;
}

.oc-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 660px;
  margin: 34px 0 0;
  border-top: 3px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.oc-facts div {
  min-width: 0;
  padding: 13px 10px 12px;
  border-right: 1px solid rgba(53, 32, 92, 0.35);
}

.oc-facts div:last-child {
  border-right: 0;
}

.oc-facts dt {
  color: var(--turquoise-deep);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
}

.oc-facts dd {
  order: -1;
  margin: 0 0 3px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(23px, 2.3vw, 34px);
  line-height: 0.9;
}

.oc-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(10, 42px);
  gap: 9px;
  min-height: 450px;
  animation: oc-arrive 520ms 100ms steps(6, end) both;
}

.oc-collage::before {
  content: "";
  position: absolute;
  inset: 10% -5% 2% 2%;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--turquoise) 0 9px, transparent 9px calc(100% - 9px), var(--coral) calc(100% - 9px)),
    var(--sea-glass);
  transform: rotate(-1.3deg);
}

.oc-collage__tile {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 4px solid var(--cream);
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
}

.oc-collage__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  transition: transform 220ms steps(4, end), filter 220ms linear;
}

.oc-collage__tile:hover img {
  filter: saturate(1.1);
  transform: scale(1.035);
}

.oc-collage__tile figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 7px 6px;
  color: var(--cream);
  background: rgba(32, 19, 56, 0.9);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.25;
  text-transform: uppercase;
}

.oc-collage__tile figcaption span {
  color: var(--gold);
}

.oc-collage__tile figcaption b {
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-collage__tile--lead {
  z-index: 6;
  grid-column: 1 / 8;
  grid-row: 1 / 7;
  transform: rotate(-1.2deg);
}

.oc-collage__tile--mimic {
  z-index: 5;
  grid-column: 8 / 13;
  grid-row: 1 / 4;
  transform: rotate(1.7deg);
}

.oc-collage__tile--ink {
  z-index: 4;
  grid-column: 8 / 13;
  grid-row: 4 / 7;
  transform: rotate(-1deg);
}

.oc-collage__tile--builder {
  z-index: 3;
  grid-column: 1 / 5;
  grid-row: 7 / 11;
  transform: rotate(1.1deg);
}

.oc-collage__tile--shell {
  z-index: 4;
  grid-column: 5 / 9;
  grid-row: 7 / 11;
  transform: rotate(-1.7deg);
}

.oc-collage__tile--baby {
  z-index: 2;
  grid-column: 9 / 13;
  grid-row: 7 / 11;
  transform: rotate(1.3deg);
}

.oc-collage__tile.art-missing {
  background:
    radial-gradient(circle at 50% 38%, var(--gold) 0 7px, transparent 8px),
    linear-gradient(135deg, var(--ink), var(--turquoise-deep));
}

.oc-collage__tile.art-missing::after {
  content: "OCTO";
  position: absolute;
  inset: 38% 0 auto;
  color: var(--cream);
  font-family: var(--display);
  font-size: 30px;
  text-align: center;
}

.oc-keyboard-rule {
  height: 29px;
  margin-inline: calc(50% - 50vw);
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--ink) 4px 7px, transparent 7px 20px),
    repeating-linear-gradient(0deg, var(--turquoise) 0 4px, var(--gold) 4px 8px);
}

.oc-section {
  position: relative;
  padding: clamp(72px, 8vw, 116px) 0;
  border-bottom: 4px solid var(--ink);
  scroll-margin-top: 80px;
}

.oc-section-head {
  max-width: 890px;
  margin-bottom: 35px;
}

.oc-section-head--wide {
  max-width: 760px;
}

.oc-section-head h2 {
  margin: 7px 0 13px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(58px, 7.3vw, 104px);
  font-weight: 400;
  letter-spacing: 0.018em;
  line-height: 0.84;
  text-transform: uppercase;
}

.oc-section-head > p:last-child,
.oc-section-head > div > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #473955;
  font-size: 18px;
}

.oc-section-head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.oc-section-head--center > p:last-child {
  margin-inline: auto;
}

.oc-section-head--rail {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.oc-counter {
  background:
    linear-gradient(90deg, rgba(37, 185, 176, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(37, 185, 176, 0.1) 1px, transparent 1px),
    var(--sea-glass);
  background-size: 32px 32px;
}

.oc-counter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(370px, 0.68fr);
  align-items: start;
  gap: clamp(35px, 5vw, 72px);
}

.oc-counter__editorial {
  min-width: 0;
}

.oc-counter-steps {
  margin: 0;
  padding: 0;
  border-top: 4px solid var(--ink);
  list-style: none;
}

.oc-counter-steps > li {
  display: grid;
  grid-template-columns: 67px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0 21px;
  border-bottom: 1px solid rgba(53, 32, 92, 0.35);
}

.oc-counter-steps > li > span {
  color: var(--coral-deep);
  font-family: var(--display);
  font-size: 38px;
  line-height: 0.9;
}

.oc-counter-steps p {
  max-width: 610px;
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
}

.oc-counter-steps .oc-step-note {
  margin-top: 5px;
  color: #526269;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
}

.oc-counter-steps small {
  display: block;
  margin-top: 7px;
  color: var(--turquoise-deep);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
}

.oc-lane-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 37px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  background: rgba(255, 248, 230, 0.5);
  overflow: hidden;
}

.oc-lane-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(248, 201, 91, 0.34), transparent);
}

.oc-lane-strip b {
  color: var(--coral-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
}

.oc-lane-strip > i {
  display: block;
  width: 0;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 7px);
  transition: width 240ms steps(5, end);
}

.oc-lane-strip strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap;
}

.oc-lane-strip--x::before {
  background: linear-gradient(90deg, rgba(37, 185, 176, 0.28), transparent);
}

.oc-lane-strip--x > i {
  background: repeating-linear-gradient(90deg, var(--turquoise-deep) 0 5px, transparent 5px 7px);
}

.oc-counter-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 37px;
  align-items: center;
  margin-top: 45px;
  padding: 23px;
  border: 3px solid var(--ink);
  background: var(--sand-light);
  box-shadow: 8px 8px 0 var(--turquoise-deep);
}

.oc-mini-odds {
  display: grid;
  margin-top: 13px;
  border-top: 1px solid rgba(53, 32, 92, 0.28);
}

.oc-mini-odd {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(53, 32, 92, 0.2);
}

.oc-mini-odd i {
  width: 7px;
  height: 7px;
  background: var(--tier);
  box-shadow: 3px 3px 0 rgba(32, 19, 56, 0.18);
}

.oc-mini-odd span {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-mini-odd b {
  color: var(--coral-deep);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
}

.oc-clam-note {
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--sea-glass);
}

.oc-clam-note img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  image-rendering: pixelated;
}

.oc-clam-note figcaption {
  padding: 9px;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.45;
}

.oc-x-desk {
  margin-top: 48px;
  padding: clamp(21px, 3vw, 31px);
  border: 3px solid var(--ink);
  color: var(--cream);
  background:
    radial-gradient(circle at 93% 9%, rgba(37, 185, 176, 0.23), transparent 24%),
    var(--ink);
  box-shadow: 9px 9px 0 var(--coral);
}

.oc-x-desk .oc-kicker {
  color: var(--gold);
}

.oc-x-desk__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.oc-x-desk h3,
.oc-vending h3 {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(37px, 4vw, 55px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}

.oc-x-desk__mark {
  display: grid;
  width: 45px;
  height: 45px;
  flex: none;
  place-items: center;
  border: 2px solid var(--turquoise);
  color: var(--turquoise);
  font-family: var(--display);
  font-size: 27px;
}

.oc-x-desk__desc {
  margin: 14px 0 19px;
  color: var(--sea-glass);
  font-size: 15px;
}

.oc-field {
  margin-top: 14px;
}

.oc-field label,
.oc-field__label,
.oc-referral-card > label,
.oc-seller__form > label {
  display: block;
  margin: 0 0 7px;
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.oc-field textarea,
.oc-field input,
.oc-referral-card input,
.oc-seller__form input {
  width: 100%;
  border: 2px solid var(--turquoise-deep);
  border-radius: 0;
  color: var(--cream);
  background: var(--ink-deep);
  outline: 0;
}

.oc-field textarea:focus,
.oc-field input:focus,
.oc-referral-card input:focus,
.oc-seller__form input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(248, 201, 91, 0.2);
}

.oc-field textarea {
  min-height: 152px;
  padding: 12px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.65;
}

.oc-field input,
.oc-seller__form input {
  min-height: 44px;
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: 11px;
}

.oc-turnstile:empty {
  display: none;
}

.oc-inline-actions,
.oc-x-desk__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 9px;
}

.oc-x-desk .oc-outline-button {
  color: var(--sea-glass);
}

.oc-x-desk .oc-outline-button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--sea-glass);
}

.oc-x-desk__actions {
  margin-top: 18px;
}

.oc-x-desk__actions > * {
  flex: 1 1 150px;
}

.oc-state-note {
  margin: 10px 0 0;
  color: #758184;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.55;
}

.oc-x-desk .oc-state-note {
  color: var(--sea-glass-deep);
}

.oc-feedback {
  display: none;
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
}

.oc-feedback.show {
  display: block;
}

.oc-feedback.ok {
  color: var(--gold);
  background: rgba(248, 201, 91, 0.09);
}

.oc-feedback.err {
  color: #ff9b8f;
  background: rgba(242, 105, 92, 0.1);
}

.oc-vending {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 112px);
  min-width: 0;
  padding: 0 22px 20px;
  border: 4px solid var(--ink-deep);
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(37, 185, 176, 0.07) 1px, transparent 1px),
    var(--ink);
  background-size: 18px 18px;
  box-shadow:
    11px 11px 0 var(--coral),
    17px 17px 0 var(--ink-deep);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--gold) var(--ink-deep);
  scrollbar-width: thin;
}

.oc-vending__awning {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 31px;
  margin: 0 -22px 20px;
  border-bottom: 4px solid var(--ink-deep);
}

.oc-vending__awning i:nth-child(odd) {
  background: var(--coral);
}

.oc-vending__awning i:nth-child(even) {
  background: var(--gold);
}

.oc-vending__head .oc-kicker {
  color: var(--turquoise);
}

.oc-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 8px;
  border: 1px solid var(--turquoise);
  color: var(--sea-glass);
  background: rgba(37, 185, 176, 0.08);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oc-status i {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--gold);
  animation: oc-blink 1.8s steps(2, end) infinite;
}

.oc-status.live {
  border-color: var(--gold);
  color: var(--gold);
}

.oc-status.live i {
  background: var(--coral);
}

.oc-status.warn {
  border-color: var(--coral);
  color: #ffae9e;
}

.oc-vending__count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 17px;
}

.oc-vending__count strong {
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(54px, 5vw, 75px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.8;
}

.oc-vending__count span {
  color: var(--sea-glass);
  font-family: var(--mono);
  font-size: 11px;
}

.oc-vending__count em {
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
  text-transform: uppercase;
}

.oc-meter {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 2px;
  height: 14px;
  margin: 13px 0 15px;
}

.oc-meter i {
  border: 1px solid rgba(201, 238, 226, 0.24);
  background: var(--ink-deep);
}

.oc-meter i.on {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 7px rgba(248, 201, 91, 0.35);
}

.oc-countdown-label {
  margin: 0 0 6px;
  color: var(--sea-glass);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.4;
  text-align: right;
}

.oc-clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--turquoise-deep);
}

.oc-clock div {
  padding: 8px 5px 7px;
  border-right: 1px solid rgba(201, 238, 226, 0.25);
  text-align: center;
}

.oc-clock div:last-child {
  border-right: 0;
}

.oc-clock strong {
  display: block;
  color: var(--cream);
  font-family: var(--display);
  font-size: 32px;
  font-weight: 400;
  line-height: 0.87;
}

.oc-clock span {
  display: block;
  margin-top: 4px;
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 7px;
  text-transform: uppercase;
}

.oc-eligibility {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0;
  padding: 9px 10px;
  border-left: 4px solid var(--coral);
  color: var(--sea-glass);
  background: rgba(242, 105, 92, 0.09);
  font-size: 12px;
  line-height: 1.4;
}

.oc-eligibility i {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--coral);
}

.oc-eligibility p {
  margin: 0;
}

.oc-eligibility.eligible {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(248, 201, 91, 0.08);
}

.oc-quantity {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid rgba(201, 238, 226, 0.24);
}

.oc-quantity > label {
  color: var(--sea-glass);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.oc-stepper {
  display: flex;
  border: 2px solid var(--turquoise-deep);
}

.oc-stepper button {
  width: 30px;
  height: 32px;
  padding: 0;
  border: 0;
  color: var(--gold);
  background: var(--ink-deep);
  font-family: var(--mono);
  font-size: 17px;
}

.oc-stepper button:hover {
  color: var(--ink-deep);
  background: var(--gold);
}

.oc-stepper input {
  width: 49px;
  height: 32px;
  border: 0;
  border-inline: 2px solid var(--turquoise-deep);
  border-radius: 0;
  color: var(--cream);
  background: var(--ink-deep);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  -moz-appearance: textfield;
}

.oc-stepper input::-webkit-inner-spin-button,
.oc-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.oc-max-button {
  height: 36px;
  padding: 0 9px;
  border: 2px solid var(--coral);
  color: var(--cream);
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
}

.oc-max-button:hover {
  color: var(--ink-deep);
  background: var(--coral);
}

.oc-receipt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0;
  border: 1px solid rgba(201, 238, 226, 0.3);
}

.oc-receipt > div {
  min-width: 0;
  padding: 8px 9px;
  border-right: 1px solid rgba(201, 238, 226, 0.18);
  border-bottom: 1px solid rgba(201, 238, 226, 0.18);
}

.oc-receipt > div:nth-child(2n) {
  border-right: 0;
}

.oc-receipt > div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.oc-receipt span {
  display: block;
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 7px;
  text-transform: uppercase;
}

.oc-receipt b {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-receipt .oc-receipt__earn {
  background: rgba(248, 201, 91, 0.08);
}

.oc-receipt__earn b {
  color: var(--gold);
}

.oc-mint-button--vending {
  width: 100%;
  min-height: 63px;
  border-color: var(--cream);
  font-size: 14px;
  box-shadow:
    5px 5px 0 var(--coral-deep),
    inset 0 -6px 0 rgba(201, 142, 36, 0.55);
}

.oc-referral-chip {
  margin: 10px 0 0;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
}

.oc-lane-key {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid var(--turquoise-deep);
}

.oc-lane-key p {
  display: grid;
  grid-template-columns: 49px 1fr;
  gap: 8px;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(201, 238, 226, 0.15);
}

.oc-lane-key b {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 400;
  text-transform: uppercase;
}

.oc-lane-key span {
  color: var(--sea-glass);
  font-size: 10px;
  line-height: 1.45;
}

.oc-lane-key .oc-lane-key__either b {
  color: var(--coral);
}

.oc-vending__keys {
  height: 16px;
  margin: 12px -22px -20px;
  border-top: 2px solid var(--ink-deep);
  background:
    repeating-linear-gradient(90deg, var(--cream) 0 14px, var(--ink-deep) 14px 16px),
    var(--gold);
}

.oc-model-index {
  color: var(--cream);
  background:
    radial-gradient(circle at 13% 17%, rgba(37, 185, 176, 0.28), transparent 18%),
    linear-gradient(90deg, rgba(255, 248, 230, 0.04) 1px, transparent 1px),
    var(--ink);
  background-size: auto, 48px 48px, auto;
}

.oc-model-index .oc-section-head h2,
.oc-model-index .oc-section-head > div > p:last-child,
.oc-model-index .oc-section-head > p:last-child {
  color: var(--cream);
}

.oc-model-index .oc-kicker {
  color: var(--turquoise);
}

.oc-model-index .oc-outline-button {
  flex: none;
  color: var(--gold);
}

.oc-model-index .oc-outline-button:hover {
  color: var(--ink);
  background: var(--gold);
}

.oc-rail,
.oc-market-rail {
  display: flex;
  gap: 14px;
  margin-inline: calc(50% - 50vw);
  padding: 8px max(32px, calc((100vw - 1240px) / 2)) 22px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--gold) rgba(255, 248, 230, 0.12);
  scrollbar-width: thin;
}

.oc-rail > * {
  flex: 0 0 clamp(220px, 23vw, 294px);
  scroll-snap-align: start;
}

.oc-model-bank {
  display: flex;
  gap: 16px;
}

.oc-model-bank__group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
}

.oc-rail > .oc-model-bank__group {
  flex: 0 0 auto;
}

.oc-model-bank__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 3px 7px;
  border-bottom: 2px solid var(--turquoise-deep);
}

.oc-model-bank__head i {
  width: 8px;
  height: 8px;
  background: var(--tier);
}

.oc-model-bank__head h3 {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
}

.oc-model-bank__head span {
  margin-left: auto;
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.oc-model-bank__rail {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.oc-model-stamp {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 205px;
  min-height: 273px;
  flex: none;
  border: 3px solid var(--cream);
  background: var(--ink-deep);
  box-shadow: 5px 5px 0 var(--tier);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 140ms steps(3, end);
}

.oc-model-stamp:hover {
  transform: translateY(-5px);
}

.oc-model-stamp__art {
  position: relative;
  min-height: 210px;
  overflow: hidden;
}

.oc-model-stamp__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: hue-rotate(var(--hue));
}

.oc-model-stamp__art span {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 5px;
  color: var(--ink-deep);
  background: var(--gold);
  font-family: var(--mono);
  font-size: 8px;
}

.oc-model-stamp__copy {
  padding: 8px 9px 10px;
  border-top: 2px solid var(--cream);
  background: var(--ink);
}

.oc-model-stamp__copy small,
.oc-model-stamp__copy span {
  display: block;
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 7px;
  line-height: 1.4;
  text-transform: uppercase;
}

.oc-model-stamp__copy strong {
  display: block;
  margin: 2px 0;
  overflow: hidden;
  color: var(--cream);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  line-height: 0.96;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-model-stamp.art-missing,
.oc-token-card.art-missing,
.oc-market-card.art-missing {
  background:
    radial-gradient(circle at 50% 37%, var(--tier, var(--gold)) 0 12px, transparent 13px),
    var(--ink-deep);
}

.oc-rank-row.art-missing {
  background:
    radial-gradient(circle at 27% 50%, var(--tier) 0 13px, transparent 14px),
    rgba(255, 248, 230, 0.58);
}

.oc-tier-section {
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(242, 105, 92, 0.16) 18px 21px, transparent 21px calc(100% - 18px), rgba(37, 185, 176, 0.18) calc(100% - 18px) calc(100% - 15px), transparent calc(100% - 15px)),
    var(--sand-light);
}

.oc-rank-ladder {
  border-top: 4px solid var(--ink);
  counter-reset: rank;
}

.oc-rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(120px, 0.38fr) minmax(220px, 1fr) minmax(145px, 0.35fr);
  align-items: stretch;
  min-height: 168px;
  border-bottom: 2px solid var(--ink);
  counter-increment: rank;
}

.oc-rank-row:nth-child(odd) {
  background: rgba(255, 248, 230, 0.58);
}

.oc-rank-row::before {
  content: "0" counter(rank);
  display: grid;
  place-items: center;
  border-right: 2px solid var(--ink);
  color: var(--tier);
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--ink);
}

.oc-rank-row__image {
  position: relative;
  margin: 12px;
  border: 3px solid var(--ink);
  background: var(--ink);
  overflow: hidden;
}

.oc-rank-row__image img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  image-rendering: pixelated;
  transition: transform 180ms steps(4, end);
}

.oc-rank-row:hover .oc-rank-row__image img {
  transform: scale(1.04);
}

.oc-rank-row__body {
  align-self: center;
  padding: 19px 22px 18px 7px;
}

.oc-rank-row__body h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(33px, 4vw, 55px);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.9;
  text-transform: uppercase;
}

.oc-rank-row__body p {
  max-width: 540px;
  margin: 8px 0 0;
  color: #4a4351;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.65;
  text-transform: uppercase;
}

.oc-rank-row__body small {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 7px;
  color: var(--cream);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.oc-rank-row__data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border-left: 2px solid var(--ink);
  background: color-mix(in srgb, var(--tier) 17%, transparent);
}

.oc-rank-row__data strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 33px;
  font-weight: 400;
  line-height: 0.85;
}

.oc-rank-row__data span {
  color: var(--coral-deep);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  text-transform: uppercase;
}

.oc-rank-row__data i {
  display: block;
  width: var(--share);
  min-width: 2px;
  height: 8px;
  margin-top: 3px;
  background: var(--tier);
  box-shadow: 3px 3px 0 var(--ink);
}

.oc-story {
  background:
    radial-gradient(circle at 91% 20%, rgba(248, 201, 91, 0.34), transparent 17%),
    var(--coral);
}

.oc-story__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: start;
}

.oc-story__index {
  position: sticky;
  top: 116px;
}

.oc-story__index > span {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(116px, 16vw, 218px);
  line-height: 0.68;
  text-shadow: 7px 7px 0 var(--ink);
}

.oc-story .oc-kicker {
  color: var(--ink);
}

.oc-story__index h2 {
  max-width: 470px;
  margin: 8px 0 16px;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(58px, 7vw, 98px);
  font-weight: 400;
  line-height: 0.82;
  text-transform: uppercase;
}

.oc-story__deck {
  max-width: 400px;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.5;
}

.oc-story__index .oc-text-link {
  color: var(--ink);
  border-color: var(--ink);
}

.oc-story__body {
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  border: 4px solid var(--ink);
  background: var(--sand-light);
  box-shadow: 12px 12px 0 var(--ink);
}

.oc-story__drop {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2.3vw, 29px);
  line-height: 1.48;
}

.oc-story__drop::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  color: var(--coral-deep);
  font-family: var(--display);
  font-size: 76px;
  line-height: 0.7;
}

.oc-story__timeline {
  margin: 39px 0 0;
  padding: 0;
  border-top: 3px solid var(--ink);
  list-style: none;
}

.oc-story__timeline li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(53, 32, 92, 0.35);
}

.oc-story__timeline span {
  color: var(--turquoise-deep);
  font-family: var(--display);
  font-size: 32px;
  line-height: 0.9;
}

.oc-story__timeline p {
  margin: 0;
  color: #40364d;
  font-size: 17px;
}

.oc-story__pull {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  margin-top: 27px;
  padding: 15px 17px;
  color: var(--cream);
  background: var(--ink);
}

.oc-story__pull b {
  color: var(--gold);
  font-family: var(--display);
  font-size: 47px;
  font-weight: 400;
  line-height: 0.85;
}

.oc-story__pull p {
  margin: 0;
  color: var(--sea-glass);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.55;
}

.oc-reef-rewards {
  background:
    linear-gradient(0deg, rgba(37, 185, 176, 0.1) 1px, transparent 1px),
    var(--sand);
  background-size: 19px 19px, auto;
}

.oc-rewards__spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  border: 4px solid var(--ink);
  box-shadow: 11px 11px 0 var(--turquoise-deep);
}

.oc-rewards__ramp,
.oc-rewards__ledger {
  min-width: 0;
  padding: clamp(23px, 3vw, 38px);
}

.oc-rewards__ramp {
  color: var(--cream);
  background: var(--ink);
}

.oc-rewards__ledger {
  background: var(--sand-light);
}

.oc-rewards__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 3px solid var(--turquoise);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.oc-rewards__label span:last-child {
  color: var(--coral);
}

.oc-rewards__ramp > p {
  margin: 18px 0 0;
  color: var(--sea-glass);
  font-size: 17px;
}

.oc-reef-bars {
  display: flex;
  height: 183px;
  align-items: flex-end;
  gap: 8px;
  margin: 23px 0 16px;
  padding: 0 5px;
  border-bottom: 2px solid var(--turquoise-deep);
  border-left: 2px solid var(--turquoise-deep);
  background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(201, 238, 226, 0.08) 35px 37px);
}

.oc-reef-bars i {
  height: var(--bar);
  flex: 1;
  min-height: 10px;
  background:
    repeating-linear-gradient(0deg, var(--gold) 0 6px, var(--coral) 6px 10px);
  box-shadow: 3px 0 0 rgba(32, 19, 56, 0.35);
}

.oc-rewards__next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 12px;
  border: 2px solid var(--turquoise-deep);
  color: var(--sea-glass);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.oc-rewards__next strong {
  color: var(--gold);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
}

.oc-rewards__ledger .oc-kicker {
  color: var(--coral-deep);
}

.oc-rewards__total {
  display: block;
  margin: 12px 0 27px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(76px, 10vw, 142px);
  font-weight: 400;
  line-height: 0.7;
}

.oc-rewards__total span {
  color: var(--coral-deep);
  font-size: 0.24em;
  letter-spacing: 0.05em;
}

.oc-supply-bands {
  display: grid;
  gap: 17px;
}

.oc-supply-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 13px;
  align-items: end;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}

.oc-supply-band span {
  color: #4d4156;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.oc-supply-band b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 29px;
  font-weight: 400;
  line-height: 0.9;
}

.oc-supply-band i {
  grid-column: 1 / -1;
  display: block;
  width: var(--w);
  min-width: 4px;
  height: 9px;
  background: var(--turquoise);
  box-shadow: 3px 3px 0 var(--ink);
}

.oc-supply-band--invite i {
  background: var(--coral);
}

.oc-supply-band--rest i {
  background: var(--gold);
}

.oc-rewards__ledger > p:last-child {
  margin: 25px 0 0;
  color: var(--turquoise-deep);
  font-family: var(--mono);
  font-size: 11px;
}

.oc-collection {
  background:
    radial-gradient(circle at 7% 8%, rgba(248, 201, 91, 0.28), transparent 17%),
    var(--sea-glass);
}

.oc-vault {
  display: grid;
  grid-template-columns: 0.66fr 1.34fr;
  gap: 17px;
}

.oc-claim-card,
.oc-referral-card {
  min-width: 0;
  padding: clamp(21px, 3vw, 31px);
  border: 3px solid var(--ink);
}

.oc-claim-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cream);
  background:
    linear-gradient(135deg, rgba(37, 185, 176, 0.25), transparent 45%),
    var(--ink);
  box-shadow: 8px 8px 0 var(--coral);
}

.oc-claim-card > span {
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.oc-claim-card > strong {
  margin: 9px 0 19px;
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(66px, 9vw, 112px);
  font-weight: 400;
  line-height: 0.7;
}

.oc-claim-card .oc-mint-button {
  align-self: flex-start;
}

.oc-referral-card {
  background: var(--sand-light);
}

.oc-referral-card > p {
  margin: 8px 0 21px;
  color: #4d4257;
  font-size: 17px;
}

.oc-copy-row {
  display: flex;
}

.oc-copy-row input {
  flex: 1;
  min-width: 0;
  height: 45px;
  padding: 9px 11px;
  border: 2px solid var(--ink);
  border-right: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--mono);
  font-size: 10px;
}

.oc-copy-row .oc-outline-button {
  flex: none;
}

.oc-referral-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 17px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.oc-referral-stats div {
  padding: 11px 0;
}

.oc-referral-stats div + div {
  padding-left: 20px;
  border-left: 1px solid rgba(53, 32, 92, 0.35);
}

.oc-referral-stats span {
  display: block;
  color: var(--turquoise-deep);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.oc-referral-stats strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 33px;
  font-weight: 400;
  line-height: 1;
}

.oc-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 35px 0 14px;
  padding-top: 16px;
  border-top: 3px solid var(--ink);
}

.oc-board-head p {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
}

.oc-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}

.oc-token-card,
.oc-market-card {
  position: relative;
  border: 3px solid var(--ink);
  background: var(--sand-light);
  overflow: hidden;
  box-shadow: 5px 5px 0 rgba(53, 32, 92, 0.22);
}

.oc-token-card--sealed {
  background: var(--ink);
}

.oc-token-card > img,
.oc-market-card > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  image-rendering: pixelated;
}

.oc-token-card--sealed > img {
  padding: 16px;
  object-fit: contain;
}

.oc-token-card__stamp {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 6px;
  color: var(--ink-deep);
  background: var(--gold);
  font-family: var(--mono);
  font-size: 7px;
  text-transform: uppercase;
}

.oc-token-card__body,
.oc-market-card__body {
  padding: 10px;
  border-top: 2px solid var(--ink);
}

.oc-token-card--sealed .oc-token-card__body {
  border-color: var(--cream);
  color: var(--cream);
}

.oc-token-card__meta,
.oc-market-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: var(--turquoise-deep);
  font-family: var(--mono);
  font-size: 7px;
  text-transform: uppercase;
}

.oc-token-card--sealed .oc-token-card__meta {
  color: var(--turquoise);
}

.oc-token-card__body strong,
.oc-market-card__body strong {
  display: block;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  line-height: 0.95;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-token-card--sealed .oc-token-card__body strong {
  color: var(--cream);
}

.oc-tier-pip {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--tier);
  box-shadow: 2px 2px 0 var(--ink);
}

.oc-token-card .oc-outline-button {
  width: 100%;
  margin-top: 9px;
  color: var(--gold);
}

.oc-empty {
  grid-column: 1 / -1;
  min-height: 135px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 3px dashed var(--ink);
  color: var(--ink);
  background: rgba(255, 248, 230, 0.34);
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
}

.oc-exchange {
  margin-top: 65px;
  padding: clamp(22px, 4vw, 42px);
  border: 4px solid var(--ink-deep);
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(37, 185, 176, 0.07) 1px, transparent 1px),
    var(--ink);
  background-size: 27px 27px;
  box-shadow: 12px 12px 0 var(--coral);
  scroll-margin-top: 90px;
}

.oc-exchange__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
}

.oc-exchange .oc-kicker {
  color: var(--turquoise);
}

.oc-exchange__head h3 {
  margin: 6px 0 10px;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(51px, 7vw, 94px);
  font-weight: 400;
  line-height: 0.82;
  text-transform: uppercase;
}

.oc-exchange__head p:last-child {
  max-width: 600px;
  margin: 0;
  color: var(--sea-glass);
  font-size: 16px;
}

.oc-fee-stamp {
  flex: none;
  padding: 7px 10px;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  transform: rotate(2deg);
}

.oc-market-state {
  margin: 16px 0 5px;
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 9px;
}

.oc-exchange .oc-market-rail {
  margin-top: 14px;
  padding-inline: 0;
  scrollbar-color: var(--coral) rgba(255, 248, 230, 0.12);
}

.oc-market-card {
  width: 228px;
  flex: none;
  border-color: var(--cream);
  background: var(--sand-light);
  box-shadow: 5px 5px 0 var(--turquoise-deep);
}

.oc-market-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0;
}

.oc-market-card__price strong {
  margin: 0;
  color: var(--coral-deep);
  font-size: 24px;
}

.oc-market-card__price span {
  overflow: hidden;
  color: #6a5c6e;
  font-family: var(--mono);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-market-card .oc-mint-button,
.oc-market-card .oc-outline-button {
  width: 100%;
}

.oc-seller {
  margin-top: 28px;
  padding-top: 23px;
  border-top: 2px solid var(--turquoise-deep);
}

.oc-seller__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.oc-seller__head .oc-outline-button {
  color: var(--gold);
}

.oc-seller__head .oc-outline-button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--gold);
}

.oc-seller__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 31px;
  margin-top: 19px;
}

.oc-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(73px, 1fr));
  gap: 7px;
  max-height: 338px;
  padding-right: 4px;
  overflow-y: auto;
}

.oc-picker button {
  min-width: 0;
  padding: 0;
  border: 2px solid var(--turquoise-deep);
  color: var(--cream);
  background: var(--ink-deep);
  overflow: hidden;
}

.oc-picker button:hover,
.oc-picker button.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}

.oc-picker img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  image-rendering: pixelated;
}

.oc-picker span {
  display: block;
  padding: 4px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-seller__form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.oc-seller__form > label {
  margin-bottom: 0;
}

.oc-seller__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oc-seller__actions > * {
  flex: 1 1 135px;
}

.oc-exchange .oc-outline-button {
  color: var(--sea-glass);
}

.oc-exchange .oc-outline-button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--sea-glass);
}

.oc-exchange .oc-empty {
  width: 100%;
  min-height: 100px;
  border-color: var(--turquoise-deep);
  color: var(--sea-glass);
  background: rgba(255, 248, 230, 0.04);
}

.oc-faq {
  background:
    radial-gradient(circle at 8% 90%, rgba(242, 105, 92, 0.16), transparent 18%),
    var(--sand-light);
}

.oc-faq__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(45px, 8vw, 115px);
}

.oc-faq__intro {
  position: sticky;
  top: 118px;
  align-self: start;
}

.oc-faq__intro h2 {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(64px, 8vw, 112px);
  font-weight: 400;
  line-height: 0.8;
  text-transform: uppercase;
}

.oc-faq__motif {
  position: relative;
  width: 120px;
  height: 76px;
  margin-top: 31px;
}

.oc-faq__motif i {
  position: absolute;
  border: 7px solid var(--turquoise-deep);
}

.oc-faq__motif i:nth-child(1) {
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
}

.oc-faq__motif i:nth-child(2) {
  top: 26px;
  left: 58px;
  width: 37px;
  height: 37px;
  border-color: var(--coral);
}

.oc-faq__motif i:nth-child(3) {
  top: 55px;
  left: 30px;
  width: 17px;
  height: 17px;
  border-width: 5px;
  border-color: var(--gold);
}

.oc-faq__list {
  border-top: 4px solid var(--ink);
}

.oc-faq-item {
  border-bottom: 2px solid var(--ink);
}

.oc-faq-item summary {
  position: relative;
  padding: 21px 46px 19px 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.oc-faq-item summary::-webkit-details-marker {
  display: none;
}

.oc-faq-item summary::after {
  content: "+";
  position: absolute;
  top: 13px;
  right: 3px;
  color: var(--coral-deep);
  font-family: var(--display);
  font-size: 39px;
  line-height: 1;
}

.oc-faq-item[open] summary::after {
  content: "−";
  color: var(--turquoise-deep);
}

.oc-faq-item p {
  max-width: 780px;
  margin: -3px 42px 22px 0;
  color: #514657;
  font-size: 16px;
}

.oc-footer {
  position: relative;
  padding: 49px 0 62px;
  color: var(--cream);
  background:
    linear-gradient(90deg, var(--coral) 0 13px, transparent 13px calc(100% - 13px), var(--turquoise) calc(100% - 13px)),
    var(--ink-deep);
  overflow: hidden;
}

.oc-footer__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 52px;
}

.oc-footer__brand p {
  margin: 17px 0 5px;
  color: var(--sea-glass);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
}

.oc-footer__brand > span {
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.oc-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 22px;
}

.oc-footer__links div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.oc-footer__links span {
  color: var(--turquoise);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oc-footer__links a {
  color: var(--cream);
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

.oc-footer__links code {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 10px;
}

.oc-footer__links button {
  align-self: flex-start;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 2px solid var(--gold);
  color: var(--gold);
  background: transparent;
  font-family: var(--mono);
  font-size: 9px;
  text-align: left;
}

.oc-footer__bubbles {
  position: absolute;
  right: 5%;
  bottom: 13%;
  width: 11px;
  height: 11px;
  border: 3px solid var(--turquoise);
  box-shadow:
    -35px -24px 0 -6px var(--gold),
    -60px 18px 0 -7px var(--coral),
    23px -48px 0 -8px var(--turquoise);
  opacity: 0.6;
}

.oc-wallet-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(32, 19, 56, 0.9);
}

.oc-wallet-modal.show {
  display: grid;
}

.oc-wallet-modal__box {
  width: min(420px, 100%);
  padding: 22px;
  border: 4px solid var(--gold);
  color: var(--cream);
  background: var(--ink);
  box-shadow: 9px 9px 0 var(--coral);
}

.oc-wallet-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--turquoise-deep);
  font-family: var(--display);
  font-size: 31px;
  font-weight: 400;
  text-transform: uppercase;
}

.oc-wallet-modal__head button {
  width: 34px;
  height: 34px;
  border: 2px solid var(--coral);
  color: var(--cream);
  background: transparent;
  font-family: var(--mono);
  font-size: 20px;
}

.oc-wallet-options {
  display: grid;
  gap: 8px;
}

.oc-wallet-options .oc-outline-button {
  width: 100%;
  justify-content: flex-start;
  color: var(--sea-glass);
}

.oc-wallet-options .oc-outline-button:hover {
  color: var(--ink);
  background: var(--sea-glass);
}

.oc-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 170;
  max-width: min(360px, calc(100% - 44px));
  padding: 11px 14px;
  border: 3px solid var(--ink-deep);
  color: var(--ink-deep);
  background: var(--gold);
  box-shadow: 5px 5px 0 var(--coral);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 120ms linear, transform 120ms steps(3, end);
}

.oc-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .oc-cover__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr);
    gap: 32px;
  }

  .oc-counter__grid {
    grid-template-columns: minmax(0, 1fr) minmax(342px, 0.7fr);
    gap: 35px;
  }

  .oc-rank-row {
    grid-template-columns: 63px 132px minmax(190px, 1fr) 130px;
  }

  .oc-rank-row__body {
    padding-inline: 17px;
  }

  .oc-rank-row__data {
    padding: 14px;
  }

  .oc-story__grid {
    gap: 45px;
  }
}

@media (max-width: 900px) {
  .oc-wrap {
    width: min(100% - 40px, 1240px);
  }

  .oc-cover__grid {
    grid-template-columns: 1fr;
    padding-top: 42px;
  }

  .oc-cover__copy h1 {
    max-width: 740px;
  }

  .oc-collage {
    min-height: 485px;
    grid-template-rows: repeat(10, 45px);
  }

  .oc-counter__grid {
    grid-template-columns: 1fr;
  }

  .oc-vending {
    position: static;
    max-height: none;
    max-width: 600px;
    margin-inline: auto;
    overflow: visible;
  }

  .oc-rank-row {
    grid-template-columns: 61px 144px minmax(0, 1fr);
  }

  .oc-rank-row__data {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 5px 18px;
    padding: 11px 17px;
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  .oc-rank-row__data i {
    grid-column: 2;
    width: 100%;
    max-width: var(--share);
  }

  .oc-story__grid,
  .oc-faq__grid {
    grid-template-columns: 1fr;
  }

  .oc-story__index,
  .oc-faq__intro {
    position: static;
  }

  .oc-story__index > span {
    position: absolute;
    right: 20px;
    opacity: 0.25;
  }

  .oc-vault {
    grid-template-columns: 1fr;
  }

  .oc-seller__grid {
    grid-template-columns: 1fr;
  }

  .oc-footer__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 16px;
  }

  .oc-wrap {
    width: min(100% - 28px, 1240px);
  }

  .oc-masthead__inner {
    min-height: 66px;
    gap: 10px;
  }

  .oc-logo__word {
    display: none;
  }

  .oc-logo__mark {
    width: 32px;
    height: 31px;
    transform: scale(0.94);
  }

  .oc-masthead__tools {
    gap: 5px;
  }

  .oc-menu-button {
    min-height: 38px;
    padding: 7px 8px;
  }

  .oc-menu-button span {
    display: none;
  }

  .oc-masthead select {
    min-height: 38px;
    max-width: 83px;
    padding-right: 16px;
    font-size: 9px;
  }

  .oc-masthead .oc-mint-button--small {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 9px;
  }

  .oc-menu__sheet {
    padding: 20px 20px 30px;
  }

  .oc-menu__title {
    margin-top: 16px;
    font-size: 66px;
  }

  .oc-menu__nav a {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 8px 0 5px;
  }

  .oc-menu__nav a strong {
    font-size: clamp(28px, 9vw, 43px);
  }

  .oc-menu__foot {
    flex-direction: column;
    gap: 5px;
    margin-top: 28px;
  }

  .oc-cover {
    padding-top: 23px;
  }

  .oc-cover__folio {
    align-items: center;
  }

  .oc-cover__grid {
    gap: 31px;
    padding: 35px 0 35px;
  }

  .oc-cover__copy h1 {
    margin-bottom: 19px;
    font-size: clamp(68px, 20vw, 97px);
    line-height: 0.78;
  }

  .oc-cover__lede {
    font-size: 17px;
  }

  .oc-cover__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 19px;
  }

  .oc-facts {
    grid-template-columns: 1fr 1fr;
    margin-top: 27px;
  }

  .oc-facts div:nth-child(2) {
    border-right: 0;
  }

  .oc-facts div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(53, 32, 92, 0.35);
  }

  .oc-facts dd {
    font-size: 28px;
  }

  .oc-collage {
    grid-template-rows: repeat(10, 32px);
    gap: 6px;
    min-height: 347px;
  }

  .oc-collage__tile {
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .oc-collage__tile figcaption {
    padding: 5px;
    font-size: 6px;
  }

  .oc-keyboard-rule {
    height: 23px;
  }

  .oc-section {
    padding: 65px 0;
  }

  .oc-section-head {
    margin-bottom: 27px;
  }

  .oc-section-head h2 {
    font-size: clamp(52px, 16vw, 76px);
  }

  .oc-section-head > p:last-child,
  .oc-section-head > div > p:last-child {
    font-size: 16px;
  }

  .oc-section-head--rail {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .oc-counter-steps > li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding: 18px 0;
  }

  .oc-counter-steps > li > span {
    font-size: 29px;
  }

  .oc-counter-steps p {
    font-size: 16px;
  }

  .oc-counter-note {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 31px;
    padding: 16px;
    box-shadow: 6px 6px 0 var(--turquoise-deep);
  }

  .oc-clam-note {
    width: min(190px, 68%);
  }

  .oc-x-desk {
    margin-top: 34px;
    padding: 18px;
    box-shadow: 6px 6px 0 var(--coral);
  }

  .oc-x-desk h3 {
    font-size: 41px;
  }

  .oc-inline-actions > * {
    flex: 1 1 135px;
  }

  .oc-x-desk__actions {
    flex-direction: column;
  }

  .oc-vending {
    padding: 0 16px 17px;
    box-shadow:
      7px 7px 0 var(--coral),
      12px 12px 0 var(--ink-deep);
  }

  .oc-vending__awning {
    margin: 0 -16px 17px;
  }

  .oc-vending h3 {
    font-size: 43px;
  }

  .oc-vending__count strong {
    font-size: 61px;
  }

  .oc-vending__keys {
    margin: 11px -16px -17px;
  }

  .oc-quantity {
    grid-template-columns: 1fr auto;
  }

  .oc-quantity > label {
    grid-column: 1 / -1;
  }

  .oc-rail {
    padding-inline: 14px;
  }

  .oc-rail > * {
    flex-basis: 230px;
  }

  .oc-model-bank {
    gap: 12px;
  }

  .oc-model-stamp {
    width: 190px;
    min-height: 260px;
  }

  .oc-rank-row {
    grid-template-columns: 43px 106px minmax(0, 1fr);
    min-height: 137px;
  }

  .oc-rank-row::before {
    font-size: 32px;
  }

  .oc-rank-row__image {
    margin: 8px 6px;
  }

  .oc-rank-row__image img {
    min-height: 113px;
  }

  .oc-rank-row__body {
    padding: 11px 9px 11px 0;
  }

  .oc-rank-row__body h3 {
    font-size: 36px;
  }

  .oc-rank-row__body p {
    display: none;
  }

  .oc-rank-row__data {
    grid-column: 2 / -1;
    padding: 8px 10px;
  }

  .oc-rank-row__data strong {
    font-size: 27px;
  }

  .oc-rank-row__data span {
    font-size: 8px;
  }

  .oc-story__grid {
    gap: 33px;
  }

  .oc-story__index h2 {
    font-size: 67px;
  }

  .oc-story__deck {
    font-size: 17px;
  }

  .oc-story__body {
    padding: 19px;
    box-shadow: 7px 7px 0 var(--ink);
  }

  .oc-story__drop {
    font-size: 19px;
  }

  .oc-story__drop::first-letter {
    font-size: 62px;
  }

  .oc-story__timeline li {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 8px;
  }

  .oc-story__pull {
    grid-template-columns: 1fr;
  }

  .oc-rewards__spread {
    grid-template-columns: 1fr;
    box-shadow: 7px 7px 0 var(--turquoise-deep);
  }

  .oc-rewards__ramp,
  .oc-rewards__ledger {
    padding: 20px;
  }

  .oc-reef-bars {
    height: 144px;
  }

  .oc-rewards__next {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .oc-rewards__total {
    font-size: 94px;
  }

  .oc-claim-card,
  .oc-referral-card {
    padding: 19px;
  }

  .oc-copy-row {
    align-items: stretch;
    flex-direction: column;
  }

  .oc-copy-row input {
    border-right: 2px solid var(--ink);
    border-bottom: 0;
  }

  .oc-board-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    margin-top: 29px;
  }

  .oc-token-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .oc-token-card__body,
  .oc-market-card__body {
    padding: 8px;
  }

  .oc-token-card__body strong,
  .oc-market-card__body strong {
    font-size: 19px;
  }

  .oc-exchange {
    margin-top: 48px;
    padding: 18px;
    box-shadow: 7px 7px 0 var(--coral);
  }

  .oc-exchange__head {
    flex-direction: column;
    gap: 15px;
  }

  .oc-exchange__head h3 {
    font-size: 58px;
  }

  .oc-market-card {
    width: 203px;
  }

  .oc-seller__head {
    flex-direction: column;
  }

  .oc-seller__actions {
    flex-direction: column;
  }

  .oc-seller__actions > * {
    flex-basis: auto;
  }

  .oc-faq__intro h2 {
    font-size: 70px;
  }

  .oc-faq__motif {
    display: none;
  }

  .oc-faq-item summary {
    padding: 18px 40px 16px 0;
    font-size: 17px;
  }

  .oc-faq-item summary::after {
    top: 10px;
    font-size: 34px;
  }

  .oc-faq-item p {
    margin-right: 10px;
    font-size: 15px;
  }

  .oc-footer {
    padding: 37px 0 51px;
  }

  .oc-footer__grid {
    gap: 31px;
  }

  .oc-footer__links {
    grid-template-columns: 1fr;
    gap: 19px;
  }

  .oc-toast {
    right: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
  }
}

@media (max-width: 390px) {
  .oc-wrap {
    width: calc(100% - 22px);
  }

  .oc-masthead__tools {
    gap: 3px;
  }

  .oc-masthead select {
    width: 75px;
  }

  .oc-masthead .oc-mint-button--small {
    padding-inline: 7px;
    font-size: 8px;
  }

  .oc-cover__copy h1 {
    font-size: 66px;
  }

  .oc-collage {
    grid-template-rows: repeat(10, 29px);
    min-height: 319px;
  }

  .oc-vending__count strong {
    font-size: 54px;
  }

  .oc-clock strong {
    font-size: 28px;
  }

  .oc-receipt {
    grid-template-columns: 1fr;
  }

  .oc-receipt > div {
    border-right: 0;
  }

  .oc-receipt > div:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(201, 238, 226, 0.18);
  }

  .oc-receipt > div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}