@font-face { font-family: "Google Sans"; src: url(fonts/google-sans.woff2) format("woff2"); font-weight: 500 700; font-display: block; }

:root {
  /* Material 3 roles from the seed #2b6f8c, the deep sea of Elysium's mark */
  --md-sys-color-primary: #2b6f8c;
  --md-sys-color-on-primary: #fff;
  --md-sys-color-primary-container: #c5e7f5;
  --md-sys-color-surface: #fff;
  --md-sys-color-surface-container-high: #e7f0f3;
  --md-sys-color-on-surface: #171c1f;
  --md-sys-color-on-surface-variant: #6f8086;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-motion-easing-emphasized: cubic-bezier(.2, 0, 0, 1);

  --font: "Google Sans";
  --width: 520px;
  --bar-bg: #eef5f7;
  --bar-fg: var(--md-sys-color-on-surface);
  --tld: var(--md-sys-color-on-surface-variant);
  --caret: var(--md-sys-color-primary);
  --note: var(--md-sys-color-primary);
  --bar-shadow: none;
  --bar-shape: var(--md-sys-shape-corner-full);
  --mint-bg: var(--md-sys-color-primary);
  --mint-fg: var(--md-sys-color-on-primary);
  --mint-off: var(--md-sys-color-surface);
  --mint-off-fg: var(--md-sys-color-on-surface-variant);
  --mint-shape: var(--md-sys-shape-corner-full);

  /* an 8dp grid: the button and the seal sit concentric inside the bar */
  --bar: 64px;
  --inset: 8px;
  --pad: 28px;
  --size: 24px;    /* the name at full size; app.js scales it down to fit */
  --mint-size: 16px;
  --name-weight: 500;
  --mint-weight: 700;   /* two steps over the name, whose larger size draws a thicker stroke at the same weight */
  --seal: 36px;
  --tag-pad: 14px; /* the same distance to the seal from the left, top and bottom */
  --tag-gap: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 16px;
  color: var(--md-sys-color-on-surface);
  background: #fff;
  font: 500 14px / 20px var(--font), system-ui, sans-serif;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
button, input { font: inherit; color: inherit; border: 0; padding: 0; background: none; }
button { cursor: pointer; }

/* the bar alone sets the height of main, so it sits on the exact center of the screen */
main { position: relative; width: min(var(--width), 100%); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* the floating bar, and once minted the name tag it folds into */
.bar {
  display: flex; align-items: center; position: relative;
  width: 100%; max-width: 100%; height: var(--bar);
  padding: 0 var(--inset) 0 var(--pad);
  background: var(--bar-bg); color: var(--bar-fg);
  border-radius: var(--bar-shape);
  box-shadow: var(--bar-shadow);
  transition: width .5s var(--md-sys-motion-easing-emphasized), padding .5s var(--md-sys-motion-easing-emphasized);
}

.name {
  flex: 1; min-width: 0; display: flex; align-items: baseline; cursor: text; white-space: nowrap;
  font-size: calc(var(--size) * var(--fit, 1)); font-weight: var(--name-weight); line-height: 32px;
  letter-spacing: -.01em;
}
.fit { position: relative; }
.ghost { visibility: hidden; padding-right: .08em; }
.fit input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; outline: 0; font-weight: inherit; letter-spacing: inherit; caret-color: var(--caret); }
.fit input::placeholder { color: var(--tld); opacity: .5; }
.tld { color: var(--tld); transition: color .3s; }

.mint {
  flex: none; height: calc(var(--bar) - 2 * var(--inset)); min-width: calc(var(--bar) * 1.5); padding: 0 calc(var(--bar) * .375); margin-left: 12px;
  background: var(--mint-bg); color: var(--mint-fg);
  font-size: var(--mint-size); font-weight: var(--mint-weight);
  border-radius: var(--mint-shape);
  transition: background-color .2s, color .2s, box-shadow .2s, opacity .3s;
}
.mint[aria-disabled="false"]:hover { background: color-mix(in srgb, var(--mint-fg) 8%, var(--mint-bg)); }
.mint[aria-disabled="false"]:active { background: color-mix(in srgb, var(--mint-fg) 12%, var(--mint-bg)); }
.mint:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--md-sys-color-primary-container); }
.mint[aria-disabled="true"] { background: var(--mint-off); color: var(--mint-off-fg); cursor: default; }
[data-state="minting"] .mint[aria-disabled="true"] { background: var(--mint-bg); color: var(--mint-fg); }

/* one slot under the bar for the answer to what was typed */
.under { position: absolute; top: calc(100% + 16px); left: 0; right: 0; display: grid; justify-items: center; }
.note, .after, .wallets { grid-area: 1 / 1; }
.note { margin: 0; min-height: 20px; color: var(--note); text-align: center; transition: opacity .2s; }
.note:empty { opacity: 0; }
.note a { color: inherit; text-underline-offset: 2px; }
.after, .wallets { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.wallets[hidden], .again[hidden] { display: none; }
.again {
  display: inline-flex; align-items: center; margin-top: -6px; height: 32px; padding: 0 16px;
  color: var(--note); font-weight: 600; text-decoration: none;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color .2s;
}
.again:hover, .again:focus-visible { outline: 0; background: color-mix(in srgb, var(--note) 12%, transparent); }

/* the quiet things around the bar: the mark, the gallery, the wallet once connected, and the contract */
.corners { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; max-width: calc(100vw - 72px); }
.corner {
  flex: none; height: 40px; padding: 0 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--md-sys-color-on-surface); background: var(--bar-bg);
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color .12s linear;
}
.corner:hover { background: color-mix(in srgb, var(--note) 12%, var(--bar-bg)); }
.corner:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--md-sys-color-primary-container); }
.logo { position: fixed; top: 20px; left: 16px; display: block; width: 32px; height: 32px; border-radius: var(--md-sys-shape-corner-full); outline: 0; }
.logo:focus-visible { box-shadow: 0 0 0 4px var(--md-sys-color-primary-container); }
.logo svg { display: block; width: 100%; height: 100%; }
.chip { flex: 0 1 auto; min-width: 0; max-width: 240px; }
.chip[hidden] { display: none; }
.panel {
  --shelf: min(440px, calc(100dvh - 32px));
  width: min(780px, calc(100vw - 32px)); height: var(--shelf); max-width: none; max-height: none;
  margin: auto; padding: 0; overflow: hidden; outline: 0;
  color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface);
  border: 0; border-radius: 32px; box-shadow: 0 24px 64px rgb(43 111 140 / .16);
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s linear, transform .16s ease-out, display .16s allow-discrete, overlay .16s allow-discrete;
}
.panel[open] { display: grid; grid-template-columns: var(--shelf) minmax(0, 1fr); opacity: 1; transform: none; }
@starting-style { .panel[open] { opacity: 0; transform: translateY(4px); } }
.panel::backdrop {
  background: rgb(255 255 255 / 0); backdrop-filter: blur(0);
  transition: background-color .16s linear, backdrop-filter .16s linear, display .16s allow-discrete, overlay .16s allow-discrete;
}
.panel[open]::backdrop { background: rgb(255 255 255 / .4); backdrop-filter: blur(12px); }
@starting-style { .panel[open]::backdrop { background: rgb(255 255 255 / 0); backdrop-filter: blur(0); } }
.panel.bare { width: min(340px, calc(100vw - 32px)); height: auto; }
.panel.bare[open] { grid-template-columns: minmax(0, 1fr); }
.panel.bare .card, .panel.bare .title { display: none; }

.card { position: relative; min-height: 0; overflow: hidden; background: #05060a; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.side { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 32px 28px 12px; }
.stage { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.home { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.title { height: 34px; margin: 0 40px 16px 0; line-height: 34px; font-size: 28px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.title span { color: var(--tld); }
.quiet { margin: 0; color: var(--md-sys-color-on-surface-variant); overflow-wrap: anywhere; }
.address { margin: 0; font-size: 12px; overflow-wrap: anywhere; }

.close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; color: var(--md-sys-color-on-surface-variant);
  font-size: 12px; border-radius: var(--md-sys-shape-corner-full); transition: background-color .2s;
}
.close:hover, .close:focus-visible { outline: 0; background: color-mix(in srgb, var(--note) 12%, transparent); }

/* one filled button at most, first in its row; the tonal one beside it; plain text for the rest */
.acts { display: flex; align-items: center; gap: 8px; }
.solid, .tonal, .text { flex: none; height: 44px; border-radius: var(--md-sys-shape-corner-full); transition: background-color .12s linear, color .12s linear; }
.solid { padding: 0 20px; background: var(--mint-bg); color: var(--mint-fg); font-weight: 700; }
.solid:not(:disabled):hover { background: color-mix(in srgb, var(--mint-fg) 8%, var(--mint-bg)); }
.solid:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--md-sys-color-primary-container); }
.solid:disabled { cursor: default; }
.use { width: 156px; padding: 0; text-align: center; }
.use.settled { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); font-weight: 600; }
.tonal { padding: 0 20px; background: color-mix(in srgb, var(--note) 10%, transparent); color: var(--note); font-weight: 600; }
.tonal:hover, .tonal:focus-visible { outline: 0; background: color-mix(in srgb, var(--note) 16%, transparent); }
.text { padding: 0 12px; color: var(--note); font-weight: 600; }
.text:hover, .text:focus-visible { outline: 0; background: color-mix(in srgb, var(--note) 12%, transparent); }
.text:disabled { opacity: .5; cursor: default; }

.field { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 6px 0 20px; background: var(--md-sys-color-surface-container-high); border-radius: var(--md-sys-shape-corner-full); }
.field input { flex: 1; min-width: 0; height: 100%; outline: 0; }

.hint { min-height: 20px; margin: 18px 0 2px; color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.picker {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0; margin: 0 -12px; padding: 6px 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-padding-block: 6px;
}
.picker::-webkit-scrollbar { display: none; }
.picker[hidden] { display: none; }
.picker > button {
  position: relative; flex: none; height: 40px; padding: 0 36px 0 12px; text-align: left; color: inherit; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 12px; background: none;
}
.picker > button:hover, .picker > button:focus-visible { outline: 0; background: color-mix(in srgb, var(--note) 6%, transparent); }
.picker > .picked, .picker > .picked:hover { background: color-mix(in srgb, var(--note) 12%, transparent); }
.picker .shown::after { content: "✓"; position: absolute; right: 12px; color: var(--note); font-weight: 600; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.line .text { height: 36px; margin-right: -12px; }
.line a { color: var(--note); text-decoration: none; }
.line a:hover { text-decoration: underline; text-underline-offset: 2px; }
.facts { display: flex; flex-direction: column; }

/* the gallery: the whole collection, with only the tiles near the screen in the document */
.panel.gallery { width: min(1240px, calc(100vw - 32px)); height: calc(100dvh - 32px); }
.panel.gallery[open] { display: flex; flex-direction: column; }
.wall-head { flex: none; display: flex; align-items: baseline; gap: 12px; padding: 28px 64px 12px 28px; }
.wall-head .title { margin: 0; }
.tools { flex: none; display: flex; align-items: center; gap: 16px; padding: 0 28px 16px; }
.tools .field { flex: 1; min-width: 0; height: 48px; padding: 0 20px; background: var(--bar-bg); }
.sorts { flex: none; display: flex; gap: 2px; }
.sorts button { height: 40px; padding: 0 14px; color: var(--md-sys-color-on-surface-variant); border-radius: var(--md-sys-shape-corner-full); transition: background-color .12s linear, color .12s linear; }
.sorts button:hover, .sorts button:focus-visible { outline: 0; color: var(--md-sys-color-on-surface); background: var(--bar-bg); }
.sorts .on, .sorts .on:hover { color: var(--note); background: color-mix(in srgb, var(--note) 12%, transparent); font-weight: 600; }
.wall { flex: 1; min-height: 0; padding: 0 28px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.wall::-webkit-scrollbar { display: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 16px; align-content: start; }
.tile {
  position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; min-width: 0; padding: 12px; overflow: hidden;
  color: #fff; text-decoration: none; overflow-wrap: anywhere; background: #05060a; border-radius: 20px; outline: 0;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile:focus-visible { box-shadow: 0 0 0 4px var(--md-sys-color-primary-container); }
.none { padding: 48px 0; text-align: center; }
.none[hidden] { display: none; }
.none a { color: var(--note); }

@media (max-width: 720px) {
  .panel { width: 100vw; height: auto; max-height: 92dvh; margin: auto 0 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 32px 32px 0 0; }
  .panel[open] { display: block; }
  .card { aspect-ratio: 1; }
  .side { padding: 24px 20px 8px; }
  .picker {
    flex: none; flex-direction: row; gap: 4px; margin: 0 -20px; padding: 0 20px; overflow: auto hidden; scroll-padding: 0 20px;
  }
  .picker > button { padding: 0 14px; border-radius: var(--md-sys-shape-corner-full); }
  .picker .shown::after { position: static; margin-left: 6px; }
  .panel.bare { width: 100vw; }
  .panel.gallery { width: 100vw; height: 92dvh; overflow: hidden; }
  .wall-head { padding: 24px 60px 8px 20px; }
  .tools { flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
  .tools .field { flex: 0 0 100%; }
  .sorts { margin: 0 -6px; }
  .wall { padding: 0 20px 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
}

.foot { position: fixed; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 16px; font-size: 13px; }
.foot a { color: var(--md-sys-color-on-surface-variant); text-decoration: none; }
.foot a[hidden] { display: none; }
.foot a:hover { color: var(--md-sys-color-on-surface); }
.icon { display: grid; place-items: center; width: 40px; padding: 0; color: var(--md-sys-color-on-surface-variant); }
.icon:hover { color: var(--md-sys-color-on-surface); }
.icon[hidden] { display: none; }
.snack {
  position: fixed; left: 50%; bottom: 16px; margin: 0; padding: 10px 16px; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
  color: #fff; background: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-full);
  opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity .16s linear;
}
.snack.shown { opacity: 1; }
@media (max-height: 480px) { .foot { display: none; } }

/* the name's colors, kept out of the row until the name is owned */
.seal {
  flex: none; width: 0; height: var(--seal); margin-right: 0; border-radius: var(--md-sys-shape-corner-full); opacity: 0; transform: scale(.4);
  background: var(--print);
  transition: width .5s var(--md-sys-motion-easing-emphasized), margin .5s var(--md-sys-motion-easing-emphasized), opacity .3s .1s, transform .5s var(--md-sys-motion-easing-emphasized);
}

[data-state="minted"] {
  width: calc(var(--tag-pad) + var(--seal) + var(--tag-gap) + var(--text) + var(--pad));
  padding: 0 var(--pad) 0 var(--tag-pad);
}
[data-state="minted"] .seal { width: var(--seal); margin-right: var(--tag-gap); opacity: 1; transform: none; }
[data-state="minted"] .name { flex: none; cursor: default; }
[data-state="minted"] .fit input { caret-color: transparent; }
[data-state="minted"] .tld { color: var(--bar-fg); }
[data-state="minted"] .mint { position: absolute; right: var(--inset); opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  :root { --bar: 60px; --pad: 24px; --size: 22px; --seal: 32px; }
  .mint { min-width: 80px; padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}