@font-face {
  font-family: 'Geist Pixel';
  src: url('assets/fonts/geist-pixel.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --site-scale: 1.5;
  zoom: var(--site-scale);
  color: #171717;
  background: #efede6;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  font-synthesis: none;
}

@media (max-height: 850px) {
  :root { --site-scale: 1.375; }
}

@media (max-height: 780px) {
  :root { --site-scale: 1.25; }
}

@media (max-height: 700px) {
  :root { --site-scale: 1.125; }
}

@media (max-height: 620px) {
  :root { --site-scale: 1; }
}

@media (max-height: 540px) {
  :root { --site-scale: .875; }
}

* { box-sizing: border-box; }

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.gallery-loading #main-window {
  visibility: hidden;
}

body {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(18px, 6vh, 52px) 12px 20px;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: #efede6;
  background-image: radial-gradient(#d5d2c9 .7px, transparent .7px);
  background-size: 4px 4px;
  color: #171717;
}

.draggable-panel {
  will-change: transform;
}

.drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.draggable-panel.is-dragging .drag-handle,
.draggable-panel.is-dragging.drag-handle {
  cursor: grabbing;
}

.draggable-panel.is-dragging {
  position: relative;
  z-index: 20;
}

.window {
  width: min(560px, 100%);
  margin: 0 auto;
  border: 1px solid #555;
  outline: 2px solid #d8d5cc;
  background: #d7d4cb;
  box-shadow: 5px 6px 0 rgba(35, 35, 30, .15);
}

h1 {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.title-bar {
  display: grid;
  height: 26px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-bottom: 1px solid #555;
  background: #e2e0d9;
}

.window-controls {
  display: flex;
  gap: 3px;
}

.window-controls span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #555;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #999;
}

.title-stripes {
  height: 13px;
  background: repeating-linear-gradient(
    to bottom,
    #9e9c95 0,
    #9e9c95 1px,
    transparent 1px,
    transparent 3px
  );
}

.title-bar p {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.picture-stack {
  position: relative;
  padding: 4px;
  border-bottom: 1px solid #555;
  background: #b9b6ae;
}

.banner-pane {
  display: block;
  overflow: hidden;
  border: 1px solid #555;
  background: #000;
}

.banner-pane img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  opacity: 1;
  transition: opacity 650ms cubic-bezier(.45, 0, .55, 1);
}

.banner-pane img.is-fading {
  opacity: 0;
}

.portrait-pane {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: clamp(210px, 38vw, 280px);
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid #555;
  border-radius: 0;
  background: #e8e5dd;
  cursor: pointer;
}

.portrait-pane:focus-visible {
  outline: 2px dotted #000;
  outline-offset: -5px;
}

.portrait-pane img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.picture-label {
  position: absolute;
  left: 8px;
  bottom: 7px;
  padding: 3px 5px;
  background: #f3f0e8;
  border: 1px solid #444;
  color: #111;
  font-size: 9px;
  line-height: 1;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
}

.picture-stack img {
  user-select: none;
  -webkit-user-drag: none;
}

.dock {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: #dedbd3;
}

.dock-item {
  appearance: none;
  display: flex;
  min-width: 0;
  min-height: 66px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 5px 3px;
  border: 0;
  border-right: 1px solid #777;
  border-radius: 0;
  background: #dedbd3;
  color: #111;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa;
}

.dock-item:last-child { border-right: 0; }
.dock-item:visited { color: #111; }

.dock-item:hover,
.dock-item:focus-visible {
  background: #eeece6;
  color: #111;
  outline: 1px dotted #111;
  outline-offset: -4px;
}

.dock-item:active {
  background: #cbc8c0;
  box-shadow: inset 2px 2px #999, inset -1px -1px #fff;
}

.pixel-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 28px;
  flex: 0 0 auto;
}

.pixel-prev::before,
.pixel-next::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #252525;
}

.pixel-prev::before {
  left: 3px;
  top: 12px;
  box-shadow: 4px -4px #252525, 8px -8px #252525, 12px -12px #252525,
    4px 4px #252525, 8px 8px #252525, 12px 12px #252525,
    4px 0 #252525, 8px 0 #252525, 12px 0 #252525,
    16px 0 #252525, 20px 0 #252525, 24px 0 #252525;
}

.pixel-next::before {
  right: 3px;
  top: 12px;
  box-shadow: -4px -4px #252525, -8px -8px #252525, -12px -12px #252525,
    -4px 4px #252525, -8px 8px #252525, -12px 12px #252525,
    -4px 0 #252525, -8px 0 #252525, -12px 0 #252525,
    -16px 0 #252525, -20px 0 #252525, -24px 0 #252525;
}

.pixel-random {
  width: 28px;
  height: 28px;
  border: 4px solid #39735f;
  background: #a8d2bd;
}

.pixel-random::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 4px;
  height: 4px;
  background: #285544;
  box-shadow: 12px 0 #285544, 6px 6px #285544,
    0 12px #285544, 12px 12px #285544;
}

.pixel-x {
  width: 30px;
  height: 26px;
  border: 4px solid #111;
  background: #111;
}

.pixel-x::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 3px;
  height: 3px;
  background: #fff;
  box-shadow: 3px 3px #fff, 6px 6px #fff, 9px 9px #fff,
    12px 12px #fff, 12px 0 #fff, 9px 3px #fff,
    3px 9px #fff, 0 12px #fff;
}

.dock-buy {
  background: #dedbd3;
}

.dock-buy:visited {
  color: #111;
}

.dock-buy-icon {
  display: block;
  width: 30px;
  height: 26px;
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(2px 2px 0 rgba(49, 93, 132, .24));
  shape-rendering: crispEdges;
}

.dock-buy-screen {
  fill: #8eb8d8;
  stroke: #315d84;
  stroke-width: 3;
}

.dock-buy-grid {
  fill: none;
  stroke: #5c8db1;
  stroke-width: 1;
}

.dock-buy-trace {
  fill: none;
  stroke: #f7f4ea;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: dock-buy-draw 2.2s steps(8, end) infinite;
}

.dock-buy-pulse {
  fill: #203f58;
  animation: dock-buy-blink .72s steps(2, end) infinite;
}

.dock-buy .dock-label {
  color: #274e6e;
  font-weight: 700;
}

.dock-buy:hover .dock-buy-icon,
.dock-buy:focus-visible .dock-buy-icon {
  filter: drop-shadow(2px 2px 0 rgba(49, 93, 132, .42));
}

@keyframes dock-buy-draw {
  0%, 12% { stroke-dashoffset: 40; }
  70%, 100% { stroke-dashoffset: 0; }
}

@keyframes dock-buy-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .18; }
}

.pixel-info {
  width: 28px;
  height: 28px;
  border: 4px solid #765f32;
  background: #e4c66b;
}

.pixel-info::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 3px;
  width: 4px;
  height: 4px;
  background: #4f4022;
  box-shadow: 0 7px #4f4022, 0 11px #4f4022, 0 15px #4f4022;
}

.dock-label {
  overflow: hidden;
  max-width: 100%;
  font-size: 9px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-footer {
  width: min(560px, 100%);
  margin: 15px auto 0;
  border: 1px solid #3d3c38;
  outline: 2px solid #d3d0c7;
  background: #d8d5cc;
  color: #24231f;
  font: 8px 'Courier New', Courier, monospace;
  line-height: 1.35;
  box-shadow: 5px 6px 0 rgba(35, 35, 30, .16);
}

.footer-titlebar {
  display: grid;
  height: 19px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 2px 5px;
  border-bottom: 1px solid #3d3c38;
  background: #dedbd3;
}

.footer-status-light {
  width: 8px;
  height: 8px;
  border: 1px solid #34332f;
  background: #8f302a;
  box-shadow: inset 1px 1px #ce6a61, 1px 1px #fff;
}

.footer-stripes {
  height: 9px;
  background: repeating-linear-gradient(
    to bottom,
    #8d8a83 0,
    #8d8a83 1px,
    transparent 1px,
    transparent 3px
  );
}

.footer-titlebar strong {
  font-size: 7px;
  line-height: 1;
  white-space: nowrap;
}

.footer-primary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 4px 6px;
  border: 2px outset #efede6;
  background-color: #eeece5;
  background-image: radial-gradient(#cbc8bf .65px, transparent .65px);
  background-size: 4px 4px;
}

.footer-code {
  color: #5b5952;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
}

.footer-links {
  display: flex;
  gap: 3px;
}

.footer-links a,
.footer-links button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid #55534e;
  border-radius: 0;
  background: #d8d5cc;
  color: #171717;
  font: 700 7px/1 'Courier New', Courier, monospace;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 1px 1px #fff, inset -2px -2px #9c9991;
}

.footer-links a:visited {
  color: #171717;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links button:not(:disabled):hover,
.footer-links button:not(:disabled):focus-visible {
  background: #272622;
  color: #f4f1e9;
  outline: 1px dotted #f4f1e9;
  outline-offset: -4px;
}

.footer-links button:not(:disabled) {
  cursor: pointer;
}

.footer-links button:disabled {
  background: #c8c5bc;
  color: #74716a;
  cursor: not-allowed;
  box-shadow: inset 1px 1px #e8e5dd, inset -1px -1px #aaa79f;
}

.site-announcement {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-width: 0;
  height: 11px;
  align-items: center;
  gap: 3px;
  justify-content: center;
  padding: 1px 5px;
  overflow: hidden;
  border-bottom: 1px solid #3d3c38;
  background: #dedbd3;
  color: #24231f;
  font: 700 5px/1 'Courier New', Courier, monospace;
  letter-spacing: .02em;
  white-space: nowrap;
}

.site-announcement p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-announcement a {
  flex: 0 0 auto;
  color: #24231f;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.site-announcement a:visited { color: #24231f; }
.site-announcement a:hover,
.site-announcement a:focus-visible {
  background: #24231f;
  color: #f5eee8;
  outline: 1px dotted #f5eee8;
}

.footer-globe {
  position: relative;
  width: 16px;
  height: 10px;
  border: 2px solid currentColor;
  flex: 0 0 auto;
}

.footer-globe::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 2px;
  width: 10px;
  height: 2px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.footer-globe::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  width: 2px;
  height: 6px;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.footer-club {
  position: relative;
  width: 12px;
  height: 10px;
  flex: 0 0 auto;
}

.footer-club::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0;
  width: 3px;
  height: 3px;
  background: currentColor;
  box-shadow: 7px 0 currentColor, 0 4px currentColor, 3px 4px currentColor,
    4px 4px currentColor, 7px 4px currentColor, 0 7px currentColor,
    7px 7px currentColor;
}

.music-player {
  display: grid;
  width: min(560px, 100%);
  min-height: 34px;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  margin: 7px auto 0;
  padding: 5px 7px;
  border: 1px solid #4d4b46;
  outline: 1px solid #d4d1c8;
  background: #cfccc3;
  color: #24231f;
  font: 7px/1 'Courier New', Courier, monospace;
  box-shadow: 3px 3px 0 rgba(35, 35, 30, .13);
}

.music-player audio {
  display: none;
}

.music-light {
  width: 7px;
  height: 7px;
  border: 1px solid #45433e;
  background: #6d4d48;
  box-shadow: inset 1px 1px rgba(255, 255, 255, .45);
}

.music-player.is-playing .music-light {
  background: #768d4b;
}

.music-model {
  color: #56534d;
  font-weight: 700;
  letter-spacing: .08em;
}

.music-buttons {
  display: flex;
  gap: 2px;
}

.music-buttons button {
  min-width: 24px;
  height: 20px;
  margin: 0;
  padding: 0 5px;
  border: 1px solid #55524c;
  border-radius: 0;
  background: #dbd8cf;
  color: #1f1f1c;
  font: 7px 'Courier New', Courier, monospace;
  cursor: pointer;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #96938b;
}

.music-buttons button:hover,
.music-buttons button:focus-visible {
  background: #f0eee7;
  outline: 1px dotted #222;
  outline-offset: -3px;
}

.music-buttons button:active,
.music-player.is-playing #music-toggle {
  background: #aaa79f;
  box-shadow: inset 1px 1px #77746d, inset -1px -1px #efede6;
}

.music-display {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(48px, 1fr) minmax(46px, 82px);
  align-items: center;
  gap: 7px;
  height: 20px;
  padding: 0 6px;
  border: 1px inset #aaa79f;
  background: #252521;
  color: #bcc68e;
}

.music-display span {
  overflow: hidden;
  font-size: 7px;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.music-player input[type='range'] {
  appearance: none;
  height: 9px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.music-player input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: #77746d;
}

.music-player input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 5px;
  height: 9px;
  margin-top: -3px;
  border: 1px solid #33322e;
  border-radius: 0;
  background: #dedbd3;
}

.music-player input[type='range']::-moz-range-track {
  height: 2px;
  background: #77746d;
}

.music-player input[type='range']::-moz-range-thumb {
  width: 5px;
  height: 9px;
  border: 1px solid #33322e;
  border-radius: 0;
  background: #dedbd3;
}

.music-time {
  min-width: 29px;
  color: #4c4943;
  font-size: 7px;
  text-align: right;
}

.music-volume {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #56534d;
}

.music-volume input {
  width: 42px;
}

.reset-ui {
  position: fixed;
  right: 7px;
  bottom: 7px;
  z-index: 100;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid #68665f;
  border-radius: 0;
  background: rgba(216, 213, 204, .88);
  color: #4d4b46;
  font: 6px/1 'Courier New', Courier, monospace;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #99968e;
}

.reset-ui:hover,
.reset-ui:focus-visible {
  background: #f0eee7;
  color: #171717;
  outline: 1px dotted #171717;
  outline-offset: -3px;
}

.reset-ui:active {
  box-shadow: inset 1px 1px #77746d, inset -1px -1px #fff;
}

.about-window,
.buy-window {
  width: min(780px, calc(100% - 24px));
  max-width: none;
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid #4f4e49;
  outline: 2px solid #d8d5cc;
  background: #d7d4cb;
  color: #171717;
  font-family: 'Geist Pixel', 'Courier New', monospace;
  box-shadow: 10px 12px 0 rgba(35, 35, 30, .24);
}

.about-window::backdrop,
.buy-window::backdrop {
  background: rgba(239, 237, 230, .82);
}

.about-shell,
.buy-shell {
  border: 2px outset #efede6;
  background: #d7d4cb;
}

.about-title-bar {
  display: grid;
  height: 28px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-bottom: 1px solid #555;
  background: #e2e0d9;
}

.about-title-close {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  padding: 0;
  border: 1px solid #555;
  border-radius: 0;
  background: #d8d5cc;
  color: #222;
  font: 14px/1 'Geist Pixel', 'Courier New', monospace;
  cursor: pointer;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #999;
}

.about-title-close:active {
  box-shadow: inset 1px 1px #888, inset -1px -1px #fff;
}

.about-popup-stripes {
  height: 13px;
  background: repeating-linear-gradient(
    to bottom,
    #9e9c95 0,
    #9e9c95 1px,
    transparent 1px,
    transparent 3px
  );
}

.about-title-bar p {
  margin: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-body {
  display: grid;
  max-height: min(72vh, 650px);
  grid-template-columns: minmax(0, 1.65fr) minmax(200px, .55fr);
  gap: 34px;
  padding: 32px;
  overflow: auto;
  border-bottom: 1px solid #666;
  background-color: #f1efe8;
  background-image: radial-gradient(#d5d2c9 .6px, transparent .6px);
  background-size: 4px 4px;
}

.buy-window {
  width: min(720px, calc(100% - 24px));
  max-height: min(90vh, 800px);
}

.buy-body {
  max-height: min(74vh, 660px);
  padding: 26px 30px 30px;
  overflow: auto;
  border-bottom: 1px solid #666;
  background-color: #f1efe8;
  background-image:
    linear-gradient(90deg, transparent 0 49%, rgba(119, 117, 110, .08) 49% 51%, transparent 51%),
    radial-gradient(#d5d2c9 .6px, transparent .6px);
  background-size: 84px 100%, 4px 4px;
}

.buy-kicker {
  margin: 0 0 8px;
  color: #5c5a53;
  font-size: 9px;
  letter-spacing: .05em;
}

.buy-body h2 {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
}

.buy-lead {
  max-width: 600px;
  margin: 0 0 18px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

.buy-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-bottom: 14px;
}

.buy-path {
  position: relative;
  min-height: 92px;
  padding: 12px 13px;
  overflow: hidden;
  border: 1px solid #64625c;
  box-shadow: inset 1px 1px rgba(255, 255, 255, .65), 3px 3px 0 rgba(45, 44, 40, .1);
}

.buy-path::after {
  position: absolute;
  right: -7px;
  bottom: -15px;
  color: rgba(255, 255, 255, .45);
  font: 54px/1 'Geist Pixel', 'Courier New', monospace;
}

.buy-path-token {
  background: #a9d7c7;
}

.buy-path-token::after { content: '$'; }

.buy-path-nft {
  background: #c6b5df;
}

.buy-path-nft::after { content: '[]'; }

.buy-path-tag {
  display: block;
  margin-bottom: 8px;
  color: #4f4d47;
  font-size: 8px;
  letter-spacing: .08em;
}

.buy-path strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .03em;
}

.buy-path p {
  position: relative;
  z-index: 1;
  max-width: 245px;
  margin: 0;
  font: 9px/1.45 'Courier New', Courier, monospace;
}

.buy-steps {
  display: grid;
  gap: 6px;
}

.buy-step {
  border: 1px solid #77756e;
  background: #e7e4dc;
  box-shadow: inset 1px 1px #fff, 2px 2px 0 rgba(40, 39, 35, .08);
}

.buy-step[open] {
  border-color: #4f4d47;
  background: #eceae3;
}

.buy-step summary {
  display: grid;
  min-height: 58px;
  grid-template-columns: 29px 48px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  padding: 7px 10px 7px 7px;
  cursor: pointer;
  list-style: none;
}

.buy-step summary::-webkit-details-marker { display: none; }

.buy-step summary:hover,
.buy-step summary:focus-visible {
  background: #f5f3ed;
  outline: 1px dotted #171717;
  outline-offset: -4px;
}

.buy-step-number {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #76736c;
  background: #d5d2ca;
  color: #5c5952;
  font-size: 8px;
  box-shadow: inset 1px 1px #fff;
}

.buy-step-icon {
  display: block;
  width: 44px;
  height: 36px;
  shape-rendering: crispEdges;
}

.buy-icon-frame,
.buy-nft-card {
  fill: #d7d4cc;
  stroke: #35342f;
  stroke-width: 2;
}

.buy-icon-line,
.buy-bridge-arrow,
.buy-nft-spark {
  fill: none;
  stroke: #35342f;
  stroke-width: 2;
}

.buy-icon-grid {
  fill: none;
  stroke: #a9a69e;
  stroke-width: 1;
}

.buy-wallet-node { fill: #7448b4; }
.buy-wallet-signal { fill: #2a9f79; animation: buy-wallet-signal 1.4s steps(2, end) infinite; }
.buy-bridge-packet { fill: #2a9f79; animation: buy-bridge-packet 1.65s steps(7, end) infinite; }
.buy-bridge-arrow { stroke: #7448b4; }

.buy-swap-trace {
  fill: none;
  stroke: #7448b4;
  stroke-width: 3;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: buy-swap-trace 2.2s steps(10, end) infinite;
}

.buy-swap-pulse {
  fill: #2a9f79;
  animation: buy-swap-pulse 2.2s steps(2, end) infinite;
}

.buy-nft-pixel { fill: #2a9f79; }
.buy-nft-pixel-b { fill: #7448b4; animation: buy-nft-pixel 1.4s steps(2, end) .2s infinite; }
.buy-nft-pixel-c { fill: #dfaa21; animation: buy-nft-pixel 1.4s steps(2, end) .4s infinite; }
.buy-nft-spark { stroke: #7448b4; animation: buy-nft-spark 1.4s steps(2, end) infinite; }

@keyframes buy-wallet-signal {
  0%, 35% { transform: translateX(0); opacity: .35; }
  70%, 100% { transform: translateX(14px); opacity: 1; }
}

@keyframes buy-bridge-packet {
  from { transform: translateX(0); }
  to { transform: translateX(12px); }
}

@keyframes buy-swap-trace {
  0% { stroke-dashoffset: 40; }
  65%, 100% { stroke-dashoffset: 0; }
}

@keyframes buy-swap-pulse {
  0%, 55% { opacity: 0; }
  65%, 100% { opacity: 1; }
}

@keyframes buy-nft-pixel {
  0%, 40% { opacity: .2; }
  55%, 100% { opacity: 1; }
}

@keyframes buy-nft-spark {
  0%, 45% { opacity: 0; }
  55%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

.buy-step-copy {
  min-width: 0;
}

.buy-step-copy strong,
.buy-step-copy small {
  display: block;
}

.buy-step-copy strong {
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: .04em;
}

.buy-step-copy small {
  overflow: hidden;
  color: #646159;
  font: 9px/1.35 'Courier New', Courier, monospace;
  text-overflow: ellipsis;
}

.buy-step-toggle {
  position: relative;
  width: 13px;
  height: 13px;
}

.buy-step-toggle::before,
.buy-step-toggle::after {
  content: '';
  position: absolute;
  background: #4f4d47;
}

.buy-step-toggle::before { top: 6px; left: 1px; width: 11px; height: 1px; }
.buy-step-toggle::after { top: 1px; left: 6px; width: 1px; height: 11px; }
.buy-step[open] .buy-step-toggle::after { display: none; }

.buy-step-detail {
  padding: 14px 16px 16px 93px;
  border-top: 1px solid #aaa79f;
  background: #f4f2ec;
  font: 10px/1.6 'Courier New', Courier, monospace;
}

.buy-step-detail p { margin: 0 0 11px; }
.buy-step-detail p:last-child { margin-bottom: 0; }

.buy-step-detail ol {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding-left: 19px;
}

.buy-step-detail a { color: #4e2c82; }

.buy-network {
  display: grid;
  margin: 12px 0;
  border: 1px solid #949189;
}

.buy-network div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  border-bottom: 1px solid #bbb8af;
}

.buy-network div:last-child { border-bottom: 0; }

.buy-network dt,
.buy-network dd {
  min-width: 0;
  margin: 0;
  padding: 5px 7px;
}

.buy-network dt {
  border-right: 1px solid #bbb8af;
  background: #dedbd3;
  color: #5f5c55;
  font-size: 8px;
}

.buy-network dd {
  overflow-wrap: anywhere;
  background: #f7f5ef;
  font-size: 9px;
}

.buy-note {
  padding: 8px 9px;
  border-left: 4px solid #7448b4;
  background: #e5dfed;
}

.buy-contract { overflow-wrap: anywhere; }
.buy-contract code { font-size: 9px; }

.buy-balance-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 12px 0;
  padding: 1px;
  background: #88857d;
}

.buy-balance-examples span {
  display: grid;
  min-height: 51px;
  place-items: center;
  padding: 7px 4px;
  background: #e5e2da;
  text-align: center;
}

.buy-balance-examples b,
.buy-balance-examples small { display: block; }
.buy-balance-examples b { font-size: 10px; }
.buy-balance-examples small { color: #66635c; font-size: 7px; }

.buy-check {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  margin-top: 14px;
  border: 1px solid #5f5d57;
  background: #272622;
  color: #f4f1e9;
}

.buy-check strong,
.buy-check span {
  display: grid;
  min-height: 36px;
  place-items: center;
  padding: 5px 7px;
  border-right: 1px solid #5d5a52;
  font-size: 7px;
  line-height: 1.35;
  text-align: center;
}

.buy-check span::before {
  content: '■';
  margin-right: 4px;
  color: #83c4ad;
}

.buy-check span:last-child { border-right: 0; }
.buy-check strong { color: #d1b8f2; letter-spacing: .05em; }

.buy-sources {
  margin: 12px 0 0;
  color: #6a675f;
  font: 8px/1.5 'Courier New', Courier, monospace;
}

.buy-sources a { color: #4e2c82; }

.about-kicker {
  margin: 0 0 9px;
  color: #5c5a53;
  font-size: 9px;
  letter-spacing: .05em;
}

.about-copy h2 {
  margin: 0 0 20px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-decoration: none;
  text-rendering: optimizeSpeed;
}

.about-copy p {
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}

.about-copy .about-lead {
  max-width: 440px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.about-brief {
  display: grid;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid #77756e;
}

.about-brief h3 {
  margin: 0 0 5px;
  color: #55534d;
  font-size: 9px;
  letter-spacing: .08em;
}

.about-flow {
  display: grid;
  gap: 1px;
  margin: 12px 0 0;
  padding: 1px;
  background: #8b8880;
  list-style: none;
}

.about-flow li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 24px;
  background: #e5e2da;
  font: 8px/1.3 'Courier New', Courier, monospace;
  letter-spacing: .03em;
}

.about-flow span {
  display: grid;
  align-self: stretch;
  place-items: center;
  border-right: 1px solid #aaa79f;
  color: #66635c;
}

.about-flow b {
  padding: 5px 8px;
}

.about-copy .about-stages {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #8b8880;
  background: #e5e2da;
  font: 700 8px/1.5 'Courier New', Courier, monospace;
  text-align: center;
  letter-spacing: .02em;
}

.about-stages i {
  color: #77746d;
  font-style: normal;
}

.about-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 24px 0 0;
  padding: 1px;
  background: #77756e;
  font-family: 'Courier New', Courier, monospace;
}

.about-facts div {
  min-width: 0;
  padding: 9px;
  background: #e5e2da;
}

.about-facts dt {
  margin-bottom: 3px;
  color: #66635c;
  font-size: 8px;
}

.about-facts dd {
  overflow: hidden;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-visual {
  display: grid;
  overflow: hidden;
  align-self: start;
  min-width: 0;
  margin-top: 69px;
  background: #000;
  place-items: center;
}

.about-visual img {
  display: block;
  width: min(220px, 100%);
  height: auto;
  border: 1px solid #444;
  background: #000;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .2);
}

.about-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 46px;
  background: #dedbd3;
}

.about-main-actions { grid-template-columns: repeat(4, 1fr); }

.about-action {
  appearance: none;
  display: grid;
  min-width: 0;
  place-items: center;
  margin: 0;
  padding: 8px 5px;
  border: 0;
  border-right: 1px solid #777;
  border-radius: 0;
  background: #dedbd3;
  color: #111;
  font: 9px 'Geist Pixel', 'Courier New', monospace;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa;
}

.about-action:last-child { border-right: 0; }
.about-action:visited { color: #111; }

.about-action:hover,
.about-action:focus-visible {
  background: #efede6;
  color: #111;
  outline: 1px dotted #111;
  outline-offset: -4px;
}

.about-action:active {
  background: #c7c4bc;
  box-shadow: inset 2px 2px #999, inset -1px -1px #fff;
}

@media (max-width: 520px) {
  body { padding: 12px 8px 20px; }
  .window { box-shadow: 3px 4px 0 rgba(35, 35, 30, .15); }
  .title-bar { grid-template-columns: auto 1fr; }
  .title-bar p { display: none; }
  .portrait-pane { height: min(58vw, 260px); }
  .dock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dock-item { min-height: 68px; border-bottom: 1px solid #777; }
  .dock-item:nth-child(3) { border-right: 0; }
  .dock-item:nth-child(n + 4) { border-bottom: 0; }
  .picture-label { left: 5px; bottom: 5px; font-size: 8px; }
  .footer-titlebar strong { font-size: 7px; }
  .music-player {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 5px;
  }
  .music-model,
  .music-volume { display: none; }
  .music-display { grid-template-columns: minmax(42px, 1fr) 48px; }
  .about-window,
  .buy-window {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    box-shadow: 5px 6px 0 rgba(35, 35, 30, .24);
  }
  .about-body {
    max-height: calc(100vh - 92px);
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 18px;
  }
  .about-copy h2 { font-size: 32px; }
  .about-visual {
    width: min(210px, 100%);
    justify-self: center;
    margin-top: 0;
  }
  .about-visual img { width: 100%; }
  .about-actions { min-height: 42px; }
  .about-action { font-size: 8px; }
  .buy-body {
    max-height: calc(100vh - 92px);
    padding: 18px;
  }
  .buy-body h2 { font-size: 27px; }
  .buy-paths { grid-template-columns: 1fr; }
  .buy-path { min-height: 80px; }
  .buy-step summary {
    grid-template-columns: 25px 40px minmax(0, 1fr) 13px;
    gap: 6px;
    padding-right: 8px;
  }
  .buy-step-icon { width: 38px; height: 32px; }
  .buy-step-detail { padding: 13px; }
  .buy-network div { grid-template-columns: 75px minmax(0, 1fr); }
  .buy-balance-examples { grid-template-columns: 1fr; }
  .buy-balance-examples span { min-height: 38px; }
  .buy-check { grid-template-columns: repeat(2, 1fr); }
  .buy-check strong,
  .buy-check span { border-bottom: 1px solid #5d5a52; }
  .buy-check span:nth-child(even) { border-right: 0; }
  .buy-actions { grid-template-columns: 1fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .banner-pane img { transition-duration: .01ms; }
  .launch-status-light { animation: none; }
  .dock-buy-trace { animation: none; stroke-dashoffset: 0; }
  .dock-buy-pulse { animation: none; }
  .buy-wallet-signal,
  .buy-bridge-packet,
  .buy-swap-trace,
  .buy-swap-pulse,
  .buy-nft-pixel,
  .buy-nft-spark { animation: none; }
  .buy-swap-trace { stroke-dashoffset: 0; }
}