/* RETAIL THERAPY: the store at night, lit. Everything on the wall is a thing of the store, drawn in the projection of
   the boxes (fronts true, tops and right sides receding up and to the right) and made of the packs' own materials:
   neon acrylic with a gloss, paper, an LED board behind glass, black boxes with the store's tape, brushed metal. The
   store's tubes light the rack from above, the neon throws its own light, and the corners fall into the dark. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --ink: #161514;
  --night: #0e0e0d;
  --neon: #ccff00;
  --neon-t: #d7ff38;
  --neon-r: #8eb200;
  --paper: #f4f2ec;
  --paper-t: #fbfaf7;
  --paper-r: #aba9a5;
  --kraft: #c9a36b;
  --kraft-t: #d4b78b;
  --kraft-r: #8c724a;
  --box: #2a2a2a;
  --box-t: #585858;
  --box-r: #1d1d1d;
  --red: #c8322a;
  --metal: #b4b7ba;
  --metal-t: #dcdee0;
  --metal-r: #7e8082;
  --glow: rgba(204, 255, 0, .5);
  --glow-soft: rgba(204, 255, 0, .17);
  --amb: 0 26px 50px -14px rgba(0, 0, 0, .75);
  --gloss: linear-gradient(170deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .1) 24%, rgba(255, 255, 255, 0) 42%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id\
='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatri\
x values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='u\
rl(%23n)'/%3E%3C/svg%3E");
  --grain-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter \
id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMa\
trix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filte\
r='url(%23n)'/%3E%3C/svg%3E");
  --worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter\
 id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeCol\
orMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 0 0 0 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='1\
00%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --d: 7px;
  --col: 276px;
  --gap: 20px;
  --till: 46px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--ink);
}

body {
  font: 430 14.5px/1.38 "Archivo", system-ui, sans-serif;
  font-stretch: 92%;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
}

b {
  font-weight: 700;
}

.dm {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  overflow: visible;
}

.eth {
  height: 0.74em;
  width: auto;
  vertical-align: -0.02em;
  margin: 0 0.06em;
}

/* ---- the floor */
#floorwrap {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#floor {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#floor:active {
  cursor: grabbing;
}

/* ---- the store's light: the tubes over the rack, the neon's spill by the fixtures, the dark corners, film grain */
#atmos {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

#atmos .light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56% 40% at 50% -10%, rgba(226, 236, 255, .15), transparent 72%),
    radial-gradient(26% 34% at 93% 22%, rgba(204, 255, 0, .10), transparent 72%),
    radial-gradient(24% 30% at 8% 20%, rgba(204, 255, 0, .07), transparent 72%),
    radial-gradient(130% 95% at 50% 40%, transparent 56%, rgba(0, 0, 0, .66) 100%);
}

/* light falling on the wall around each fixture: the neon's green, the desk's warm lamp */
#atmos .pools {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(320px 250px at 160px 150px, rgba(204, 255, 0, .12), transparent 70%),
    radial-gradient(300px 260px at 160px 450px, rgba(204, 255, 0, .08), transparent 70%),
    radial-gradient(380px 330px at calc(100% - 165px) 215px, rgba(204, 255, 0, .15), transparent 70%),
    radial-gradient(360px 320px at calc(100% - 165px) 560px, rgba(255, 236, 200, .10), transparent 70%);
}

#atmos .grain {
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: var(--grain-l);
  background-size: 160px 160px;
}

#hint {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--till) + 8px);
  margin: 0;
  padding: 4px 10px;
  background: rgba(14, 14, 13, .82);
  color: #a3a19a;
  font-size: 12px;
  font-weight: 600;
  font-stretch: 82%;
  pointer-events: none;
  white-space: nowrap;
}

#hint button {
  pointer-events: auto;
  margin-left: 8px;
  padding: 1px 7px;
  font: inherit;
  color: #e9e6dc;
  background: #2b2b29;
  border: 1px solid #4a4a46;
  border-radius: 3px;
  cursor: pointer;
}

#hint button:hover {
  color: #161514;
  background: #ccff00;
  border-color: #ccff00;
}

#nexttag {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px 0 18px;
  margin: -40px 0 0 -12px;
  border: 0;
  background: var(--neon);
  color: var(--ink);
  cursor: pointer;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
  box-shadow: none;
}

#nexttag::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 100%;
  width: 2px;
  height: 14px;
  background: var(--neon);
}

#nexttag .dm {
  height: 9px;
  width: auto;
}

#nexttag .eth {
  height: 11px;
}

#nexttag[hidden] {
  display: none;
}

/* ---- a thing on the wall: a slab with its top and right side, a peg, a hard shadow on the wall */
.hang {
  position: absolute;
  z-index: 2;
  width: var(--col);
  padding: 18px 18px 16px;
  background: var(--face);
  box-shadow: calc(var(--d) + 5px) calc(var(--d) + 9px) 0 rgba(0, 0, 0, .45), var(--amb),
    var(--edge, 0 0 0 transparent);
}

.hang::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--d) * -1);
  height: var(--d);
  background: var(--top);
  transform: skewX(-45deg);
  transform-origin: 0 100%;
}

.hang::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: var(--d);
  background: var(--side);
  transform: skewY(-45deg);
  transform-origin: 0 0;
}

/* neon acrylic: lit through, a gloss across the top, a bright edge, its own light on the wall around it */
.neon {
  --face: var(--gloss), linear-gradient(180deg, #dcff45, #ccff00 46%, #bff200);
  --top: #e6ff7a;
  --side: #93b800;
  --edge: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -2px 0 rgba(70, 90, 0, .28), 0 0 54px var(--glow-soft);
}

/* paper: a little warm, a little grain, lit from the top left */
.paper {
  --face: var(--grain), linear-gradient(168deg, #fdfcf8, #f1eee6 60%, #e9e5db);
  --top: #fffefb;
  --side: #b5b2aa;
  --edge: inset 0 1px 0 #fff;
  background-size: 160px 160px, auto;
  background-blend-mode: soft-light, normal;
}

.kraft {
  --face: var(--kraft);
  --top: var(--kraft-t);
  --side: var(--kraft-r);
}

/* an LED board: anodised black, four screws, the dots behind a pane of glass */
.led {
  --face:
    radial-gradient(circle at 10px 10px, #9c9c96 0 1.4px, #34342f 1.9px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 10px) 10px, #9c9c96 0 1.4px, #34342f 1.9px, transparent 2.6px),
    radial-gradient(circle at 10px calc(100% - 10px), #9c9c96 0 1.4px, #34342f 1.9px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #9c9c96 0 1.4px, #34342f 1.9px, transparent 2.6px),
    linear-gradient(180deg, #2a2a26, #181816 55%, #121210);
  --top: #42423d;
  --side: #0b0b0a;
  --edge: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .03);
  color: var(--paper);
}

.led .dm {
  fill: var(--neon);
}

.led .dm .off {
  fill: #2a2b24;
}

/* lit dots glow; the unlit ones stay dark glass */
.led .mark .dm,
#shutter .msg .dm,
#tally .v {
  filter: drop-shadow(0 0 1px rgba(204, 255, 0, .7)) drop-shadow(0 0 7px rgba(204, 255, 0, .22));
}

.led .box .dm {
  fill: currentColor;
}

/* the bracket a fixture hangs on: a short graphite bar screwed to the wall, two screw heads catching the light */
.peg {
  position: absolute;
  top: -11px;
  left: calc(50% - 26px);
  width: 52px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, #45464a, #26272a 55%, #17181a);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  z-index: 3;
}

.peg::before,
.peg::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b9bcc0, #5d6064 70%);
}

.peg::before {
  left: 6px;
}

.peg::after {
  right: 6px;
}

/* a sign that hangs from the ceiling on two wires */
.wire {
  position: absolute;
  bottom: 100%;
  width: 2px;
  height: 100vh;
  background: linear-gradient(180deg, rgba(150, 152, 155, 0), #8d9093 60%, #c3c5c7);
  z-index: 1;
}

.wire::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: calc(var(--d) - 1px);
  width: 8px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e6e8ea, #8a8d90);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}

.wire.l {
  left: 22px;
}

.wire.r {
  right: 22px;
}

.hang h2 {
  margin: 0 0 12px;
  line-height: 0;
}

.hang .note {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.36;
}

.hang .note.red,
.slip .note.red {
  color: var(--red);
  font-weight: 600;
}

.k {
  font-weight: 700;
  font-stretch: 78%;
  font-size: 13px;
}

/* ---- buttons are boxes: black, the store's tape across, they sink into the wall when pressed */
.box {
  --bf: var(--box);
  --bt: var(--box-t);
  --br: var(--box-r);
  --tape: var(--neon);
  --tx: 22px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  margin: calc(var(--d) + 4px) var(--d) 0 0;
  padding: 0 16px 0 calc(var(--tx) + 26px);
  border: 0;
  background: var(--bf) linear-gradient(90deg, transparent var(--tx), var(--tape) var(--tx),
      var(--tape) calc(var(--tx) + 12px), transparent calc(var(--tx) + 12px));
  color: #fffdf6;
  font-weight: 750;
  font-stretch: 78%;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -2px 0 rgba(0, 0, 0, .35),
    0 8px 18px -8px rgba(0, 0, 0, .8);
  transition: transform .08s, box-shadow .2s, filter .2s;
}

.box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--d) * -1);
  height: var(--d);
  transform: skewX(-45deg);
  transform-origin: 0 100%;
  background: var(--bt) linear-gradient(90deg, transparent var(--tx), var(--tape) var(--tx),
      var(--tape) calc(var(--tx) + 12px), transparent calc(var(--tx) + 12px));
  filter: brightness(1.06);
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: var(--d);
  background: var(--br);
  transform: skewY(-45deg);
  transform-origin: 0 0;
}

.box:hover {
  --bf: #333;
}

/* a key that rises toward the finger under the pointer and goes down into the wall when pressed */
.box:hover:not(.off) {
  transform: translate(-1px, 1px);
}

.box:active,
.box:active:not(.off) {
  transform: translate(var(--d), calc(var(--d) * -1));
}

.box:active::before,
.box:active::after {
  opacity: 0;
}

.box:focus-visible {
  outline: 3px solid #fffdf6;
  outline-offset: 3px;
}

.box .pr {
  color: var(--neon);
  line-height: 0;
}

.box .pr .eth,
.box .pr .dm {
  height: 15px;
  width: auto;
}

.box.light {
  --bf: var(--paper);
  --bt: var(--paper-t);
  --br: var(--paper-r);
  color: var(--ink);
}

.box.light:hover {
  --bf: #fffdf8;
}

.box.neon {
  --bf: var(--neon);
  --bt: var(--neon-t);
  --br: var(--neon-r);
  --tape: var(--ink);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(70, 90, 0, .32), 0 0 26px var(--glow-soft);
}

.box.neon:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(70, 90, 0, .32), 0 0 34px var(--glow);
}

/* the store's one call to action breathes, slowly */
#sign .box.neon:not(.off) {
  animation: breathe 3.2s ease-in-out infinite;
}

@keyframes breathe {
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(70, 90, 0, .32), 0 0 38px var(--glow);
  }
}

.box.neon .pr {
  color: var(--ink);
}

.box.neon:hover {
  --bf: #d6ff2e;
}

.box.sm {
  min-height: 34px;
  font-size: 13px;
  padding-right: 12px;
  --tx: 14px;
  padding-left: 34px;
}

.box.wide {
  width: calc(100% - var(--d));
}

.box.off {
  opacity: .42;
  cursor: not-allowed;
}

.box.off:active {
  transform: none;
}

.neon .box:not(.neon):not(.light) {
  --tape: var(--neon-r);
}

.neon .box.neon {
  --bf: #f4f2ec;
  --bt: #fbfaf7;
  --br: #aba9a5;
  --tape: var(--neon-r);
}

.box .lbl {
  white-space: nowrap;
}

/* ---- the sign */
#sign {
  left: var(--gap);
  top: 30px;
}

#sign .mark {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 12px 12px;
  line-height: 0;
  background: radial-gradient(130% 150% at 28% 0%, #12130e, #070806 70%);
  border-radius: 3px;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 1px 0 rgba(255, 255, 255, .06);
}

/* the pane of glass over the dots */
#sign .mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(112deg, rgba(255, 255, 255, .075) 0 34%, rgba(255, 255, 255, 0) 34.4%);
  pointer-events: none;
}

#sign .mark .dm {
  height: 30px;
  width: auto;
}

/* the store opens: the tubes flicker on, then the fixtures come up one after another */
body.dim .hang,
body.dim #greeter,
body.dim #wallet {
  opacity: 0;
  transform: translateY(-14px);
}

body.dim #atmos .light,
body.dim #atmos .pools {
  opacity: 0;
}

body.lit .hang,
body.lit #greeter,
body.lit #wallet {
  transition: opacity .5s ease-out, transform .7s cubic-bezier(.2, 1.35, .4, 1);
}

body.lit #sign { transition-delay: .05s; }
body.lit #price { transition-delay: .2s; }
body.lit #card { transition-delay: .32s; }
body.lit #desk { transition-delay: .44s; }
body.lit #greeter { transition-delay: .58s; }
body.lit #wallet { transition-delay: .7s; }

body.lit #atmos .light {
  animation: tubes 1.1s steps(1, end) both;
}

body.lit #atmos .pools {
  animation: tubes 1.1s steps(1, end) .25s both;
}

body.lit #sign .mark .dm {
  animation: flicker 1.7s steps(1, end) .15s both;
}

body.lit #sign .mark .dm + .dm {
  animation-delay: .35s;
}

@keyframes tubes {
  0% { opacity: 0; }
  12% { opacity: .9; }
  16% { opacity: .15; }
  26% { opacity: 1; }
  34% { opacity: .55; }
  40% { opacity: 1; }
}

/* a number that has just changed lights up for a moment */
.flash {
  animation: flash 1.1s ease-out;
  transform-origin: 0 50%;
}

@keyframes flash {
  0% {
    transform: scale(1.07);
    filter: drop-shadow(0 0 6px rgba(204, 255, 0, .95)) brightness(1.25);
  }
}

/* a rubber stamp: red ink, pressed a little crooked, straightened when the visitor looks closer */
.stamp {
  position: absolute;
  z-index: 3;
  display: inline-block;
  padding: 5px 10px 4px;
  border: 3px solid #d33a2c;
  border-radius: 4px;
  color: #d33a2c;
  font: 800 22px/1 "Archivo", sans-serif;
  font-stretch: 76%;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: rotate(-9deg);
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
  -webkit-mask-image: var(--worn);
  mask-image: var(--worn);
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
  pointer-events: none;
}

.hang:hover .stamp {
  transform: rotate(0) scale(1.04);
}

#price .stamp {
  right: 14px;
  top: 11px;
  font-size: 19px;
}

#card .stamp {
  left: 50%;
  top: 92px;
  margin-left: -42px;
  font-size: 30px;
  background: rgba(20, 20, 18, .35);
}

@media (prefers-reduced-motion: reduce) {
  body.dim .hang,
  body.dim #greeter,
  body.dim #wallet,
  body.dim #atmos .light,
  body.dim #atmos .pools {
    opacity: 1;
    transform: none;
  }

  body.lit .hang,
  body.lit #greeter,
  body.lit #wallet {
    transition: none;
  }

  body.lit #atmos .light,
  body.lit #atmos .pools,
  body.lit #sign .mark .dm,
  .flash,
  #sign .box.neon:not(.off) {
    animation: none;
  }
}

@keyframes flicker {
  0% { opacity: .12; }
  7% { opacity: 1; }
  10% { opacity: .25; }
  15% { opacity: 1; }
  33% { opacity: .7; }
  36% { opacity: 1; }
}

#sign .sub {
  margin: 13px 0 2px;
  font-size: 13.5px;
  color: #cfccc3;
}

#sign .box {
  width: calc(100% - var(--d));
}

/* ---- the shelf's price label: the big number */
#price {
  right: calc(var(--gap) + var(--d));
  top: 74px;
}

#price .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#price .row .k {
  font-size: 14px;
}

/* the next box, sealed, as the store sells it: a pack on its own peg at the head of the sign */
#price .prod {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 2px;
}

#price .shot {
  flex: none;
  width: 74px;
  height: 74px;
  margin: -6px 0 -4px -6px;
  line-height: 0;
  filter: drop-shadow(0 7px 7px rgba(40, 52, 0, .45));
}

#price .shot img {
  width: 100%;
  height: 100%;
}

#price .what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#price .what .t {
  font-weight: 800;
  font-stretch: 76%;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

#price .what .s {
  font-weight: 700;
  font-stretch: 80%;
  font-size: 12.5px;
  line-height: 1.15;
  color: #2f3a00;
}

#price .hero {
  height: 38px;
  width: auto;
  max-width: 100%;
  margin: 12px 0 10px;
}

#price .left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#price .left .dm {
  height: 18px;
  width: auto;
}

#price .left .of {
  font-size: 13px;
  font-weight: 600;
  font-stretch: 80%;
}

.qty {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.qty .box {
  flex: 1;
  min-width: 0;
  padding-right: 12px;
}

.qty .box .pr .eth {
  height: 13px;
}

.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--neon);
  height: 42px;
  margin-bottom: 0;
}

.stepper button {
  width: 32px;
  height: 42px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.stepper output {
  min-width: 24px;
  text-align: center;
  font-weight: 800;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.stepper.big {
  height: 48px;
  margin: 4px 0 14px;
}

.stepper.big button {
  height: 48px;
  width: 44px;
}

.stepper .hint {
  color: #f4f2ec;
  font-size: 13px;
  padding: 0 14px 0 6px;
  font-weight: 600;
}

/* ---- the desk */
#desk {
  right: calc(var(--gap) + var(--d));
  top: 330px;
  padding-bottom: 20px;
}

#desk .tear {
  --tc: #e9e5db;
}

#desk h2,
#card h2,
.hhead {
  margin: 0 0 10px;
  font-weight: 800;
  font-stretch: 76%;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

#desk h2 {
  padding-bottom: 9px;
  border-bottom: 1.5px dashed #b9b5ab;
}

#desk .pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#desk .num {
  height: 28px;
  width: auto;
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 14px 0 2px;
  overflow: visible;
}

.chart .stair {
  fill: none;
  stroke: rgba(22, 21, 20, .22);
  stroke-width: 1.6;
}

.chart .share {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linejoin: miter;
}

.chart rect {
  fill: var(--ink);
}

.chart .base {
  stroke: var(--ink);
  stroke-width: 1.4;
}

.axis {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  font-stretch: 78%;
  color: #57544e;
}

#desk .box {
  width: calc(100% - var(--d));
}

/* ---- the coupons at the door, on the left */
#card {
  left: var(--gap);
  top: 288px;
  padding: 14px 18px 12px;
}

#card.disp {
  --face: var(--gloss), linear-gradient(180deg, #2b2b28, #1a1a18 60%, #131311);
  --top: #45453f;
  --side: #0c0c0b;
  --edge: inset 0 1px 0 rgba(255, 255, 255, .1);
  color: #e9e6dc;
}

#card.disp h2 {
  color: #f4f2ec;
  font-size: 19px;
  white-space: nowrap;
}

#card .crow {
  gap: 10px;
}

#card .blink {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 3px;
  background: var(--neon);
  box-shadow: 0 0 8px var(--glow), 0 0 2px #fff inset;
  animation: blink 1.4s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    background: #3c4a00;
    box-shadow: none;
  }
}

#card .cpart {
  position: relative;
  width: 222px;
  margin: 4px auto 2px;
  line-height: 0;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}

#card .cpart img {
  width: 100%;
  height: auto;
  -webkit-mask: radial-gradient(circle at 7px 0, transparent 4px, #000 4.6px) 0 0 / 14px 100% repeat-x;
  mask: radial-gradient(circle at 7px 0, transparent 4px, #000 4.6px) 0 0 / 14px 100% repeat-x;
}

#card:hover .cpart {
  transform: translateY(-4px);
}

#card .cpart::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: -6px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #050505, #232320);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

#card.disp .note {
  color: #cfccc3;
}

#card.disp .cnt {
  fill: var(--neon);
}

#card .crow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#card .crow h2 {
  margin: 0;
}

#card .cnt {
  height: 10px;
  width: auto;
  min-width: 0;
}

#card .note {
  margin-top: 8px;
  font-size: 13px;
}

#card .box {
  width: calc(100% - var(--d));
  min-height: 36px;
}

/* ---- the greeter by the door, who also minds the visitor's bag */
#greeter {
  position: absolute;
  z-index: 2;
  left: var(--gap);
  bottom: calc(var(--till) + 16px);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}

#greeter .who {
  width: 96px;
  flex: none;
  line-height: 0;
}

#greeter .who img,
#greeter .who svg {
  width: 100%;
  height: auto;
}

#greeter .bubble {
  pointer-events: auto;
  position: relative;
  width: 318px;
  margin-bottom: 34px;
  padding: 12px 14px 12px;
  background: var(--grain), linear-gradient(168deg, #fdfcf8, #f0ede5);
  background-size: 160px 160px, auto;
  background-blend-mode: soft-light, normal;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.36;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .45), var(--amb);
}

#greeter .bubble::before {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 22px;
  border-style: solid;
  border-width: 6px 12px 6px 0;
  border-color: transparent var(--ink) transparent transparent;
}

#greeter .bubble p {
  margin: 0;
}

#greeter .bubble .box {
  margin-top: 10px;
}

#greeter .bubble .box.sm {
  --tx: 10px;
  padding-left: 28px;
  font-size: 12.5px;
}

/* the shelf's three kinds, standing in the bubble like a window display */
.lineup {
  margin: 10px 0 2px;
  padding: 8px 8px 6px;
  background: #e8e3d7;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px #d2ccbe;
}

.lineup .k {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b665c;
}

.lineup .row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.lineup figure {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  text-align: center;
}

.lineup img {
  display: block;
  height: 68px;
  width: auto;
  max-width: 100%;
  margin: 2px auto 3px;
}

.lineup figcaption {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  color: #3b3832;
}

/* a desktop of ordinary height: the three stand small after the sentence; a short one leaves them out */
@media (min-width: 761px) and (max-height: 999px) {
  .lineup {
    margin: 6px 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .lineup .k,
  .lineup figcaption {
    display: none;
  }

  .lineup .row {
    justify-content: flex-start;
    gap: 12px;
  }

  .lineup figure {
    flex: 0 0 auto;
  }

  .lineup img {
    height: 40px;
    margin: 0;
  }
}

@media (min-width: 761px) and (max-height: 819px) {
  .lineup {
    display: none;
  }
}

.bagp {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1.5px dashed #a7a399;
}

.bagp p {
  margin: 0 !important;
  font-size: 13px;
}

.bagh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 12px;
}

.bagh .dm {
  height: 10px;
  width: auto;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.thumb {
  position: relative;
  padding: 2px 2px 13px;
  border: 0;
  background: #e6e3da;
  cursor: pointer;
}

.thumb img,
.thumb svg {
  display: block;
  width: 100%;
  height: 34px;
  object-fit: contain;
}

.thumb span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  font-size: 9.5px;
  font-weight: 700;
  font-stretch: 75%;
  text-align: center;
}

.thumb.sealed {
  background: #d8d5cc;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

/* ---- the wallet: a price tag with a hole */
.ptag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 14px 0 24px;
  border: 0;
  cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  font-weight: 750;
  font-stretch: 78%;
  font-size: 13px;
}

.ptag::before {
  content: "";
  position: absolute;
  left: 9px;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--night);
}

#wallet {
  right: calc(var(--gap) + var(--d));
  top: 20px;
  background: var(--gloss), var(--neon);
  color: var(--ink);
  filter: drop-shadow(0 0 12px var(--glow-soft)) drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}

#wallet .bal .eth {
  height: 11px;
}

/* ---- the till: the tally and the ticker */
#till {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--till);
  display: flex;
  background: linear-gradient(180deg, #1b1b19, #0d0d0c 40%, #090908);
  border-top: 1px solid #3b3b36;
  box-shadow: 0 -1px 0 #000, 0 -22px 40px rgba(0, 0, 0, .65);
}

#tally {
  display: flex;
  flex: none;
  border-right: 1px solid #2c2c29;
}

#tally .cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
  border-right: 1px solid rgba(255, 255, 255, .05);
  color: var(--neon);
}

#tally .cell .k {
  color: #8f8d86;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

#tally .v {
  height: 12px;
  width: auto;
}

#ticker {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: block;
}

#links {
  display: flex;
  flex: none;
  border-left: 1px solid #2c2c29;
}

#links a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #d6d4cc;
  text-decoration: none;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 12.5px;
  border-left: 1px solid #222220;
}

#links a:hover {
  color: var(--neon);
}

#links a[hidden] {
  display: none;
}

/* ---- a slip over the floor */
#sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 26px 18px 70px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(14, 14, 12, .55), rgba(5, 5, 4, .86));
  -webkit-backdrop-filter: blur(6px) saturate(.85);
  backdrop-filter: blur(6px) saturate(.85);
  overflow: auto;
  animation: sheetin .22s ease-out;
}

@keyframes sheetin {
  from {
    opacity: 0;
  }
}

#sheet[hidden] {
  display: none;
}

.slip {
  position: relative;
  width: min(560px, 100%);
  padding: 18px 26px 26px;
  background: var(--grain), linear-gradient(170deg, #fdfcf8, #f2efe7 70%, #ece8de);
  background-size: 160px 160px, auto;
  background-blend-mode: soft-light, normal;
  box-shadow: 14px 16px 0 rgba(0, 0, 0, .5), 0 40px 80px -20px rgba(0, 0, 0, .8);
  animation: slipin .32s cubic-bezier(.2, 1.2, .4, 1);
}

@keyframes slipin {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
}

.slip .tear {
  --tc: #ece8de;
}

.slip.wide {
  width: min(1020px, 100%);
}

.slip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

.slip-head .dm {
  height: 9px;
  width: auto;
}

.x {
  border: 0;
  background: transparent;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}

.slip h3 {
  margin: 4px 0 14px;
  line-height: 0;
}

.slip h3 .dm {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 26px;
}

.slip .note {
  margin: 10px 0 0;
}

.slip .fine {
  margin: 12px 0 0;
  font-size: 12px;
  color: #5b5852;
  line-height: 1.4;
}

.slip .lead {
  font-size: 16px;
  line-height: 1.45;
  margin: 4px 0 18px;
}

.slip .lead2 {
  font-size: 14px;
  line-height: 1.45;
  margin: -8px 0 18px;
  color: #3b3832;
}

.tear {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background: linear-gradient(-45deg, transparent 7px, var(--tc, var(--paper)) 0) 0 0 / 14px 10px,
    linear-gradient(45deg, transparent 7px, var(--tc, var(--paper)) 0) 0 0 / 14px 10px;
}

.lines {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}

.lines td {
  padding: 7px 0;
  border-bottom: 1px dashed #b8b4aa;
}

.lines td:nth-child(2),
.lines td:nth-child(3) {
  text-align: right;
}

.lines tfoot td {
  border: 0;
  border-top: 2px solid var(--ink);
  font-weight: 800;
  font-size: 16px;
  padding-top: 10px;
}

.lines .eth {
  height: 11px;
}

.lines tfoot .eth {
  height: 14px;
}

.split {
  display: flex;
  gap: 3px;
  margin: 14px 0 4px;
}

.split div {
  min-width: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.split div:first-child {
  background: var(--neon);
  color: var(--ink);
}

.split b {
  line-height: 0;
}

.split .eth {
  height: 13px;
}

.split span {
  font-size: 11.5px;
  font-weight: 600;
  font-stretch: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.two {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 4px;
}

.picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin: 14px 0 4px;
  max-height: 260px;
  overflow: auto;
}

.pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 6px 6px;
  border: 2px solid transparent;
  background: #e6e3da;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  font-stretch: 80%;
  text-align: left;
}

.pick img,
.pick svg:first-child {
  width: 100%;
  height: 56px;
  object-fit: contain;
}

.pick .id {
  font-weight: 800;
  font-size: 12px;
}

.pick .v {
  color: var(--ink);
  line-height: 0;
}

.pick .v .dm {
  height: 9px;
  width: auto;
}

.pick.on {
  border-color: var(--ink);
  background: var(--neon);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 0;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 13px;
}

.field input {
  font: 700 20px/1 "Archivo", sans-serif;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: #fffdf8;
  width: 100%;
  font-variant-numeric: tabular-nums;
  transition: box-shadow .2s, border-color .2s;
}

.field input:focus {
  outline: none;
  border-color: #9cc400;
  box-shadow: 0 0 0 3px rgba(204, 255, 0, .45), 0 0 26px rgba(204, 255, 0, .35);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 12px 0 4px;
}

.links a {
  display: inline-block;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  font-stretch: 80%;
}

.art {
  margin: 0 auto 6px;
  line-height: 0;
}

.art img,
.art svg {
  width: 100%;
  height: auto;
  display: block;
}

.art.card {
  max-width: 380px;
}

.cols {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 26px;
}

.dict {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dict th,
.dict td {
  text-align: left;
  vertical-align: top;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid #d3cfc5;
}

.dict thead th {
  font-size: 11.5px;
  border-bottom: 2px solid var(--ink);
  font-stretch: 78%;
}

.dict tbody th {
  font-weight: 750;
  font-stretch: 82%;
  white-space: nowrap;
}

.dict .dm {
  height: 9px;
  width: auto;
}

.honest {
  padding: 12px 14px;
  border: 2.5px solid var(--red);
  font-size: 13.5px;
  margin-bottom: 8px;
}

.honest b {
  color: var(--red);
}

.side h4 {
  margin: 14px 0 4px;
  font-size: 14px;
  font-stretch: 85%;
}

.side p {
  margin: 0;
  font-size: 13.5px;
}

/* ---- a box looked at: the drawer */
#inspect {
  position: fixed;
  z-index: 8;
  top: 12px;
  right: 12px;
  bottom: calc(var(--till) + 12px);
  width: 380px;
  overflow: auto;
  background: var(--grain), linear-gradient(170deg, #fdfcf8, #efece4);
  background-size: 160px 160px, auto;
  background-blend-mode: soft-light, normal;
  box-shadow: 12px 14px 0 rgba(0, 0, 0, .5), 0 30px 70px -20px rgba(0, 0, 0, .8);
  animation: drawer .3s cubic-bezier(.2, 1, .3, 1);
}

@keyframes drawer {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
}

/* a pack in the hand: it tilts toward the pointer and the light moves across its blister */
.art.tilt {
  position: relative;
  perspective: 900px;
}

.art.tilt img,
.art.tilt svg {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s cubic-bezier(.2, .9, .3, 1);
  will-change: transform;
}

.art.tilt::after {
  content: "";
  position: absolute;
  inset: 4%;
  pointer-events: none;
  background: radial-gradient(42% 42% at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .34), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: var(--lit, 0);
  transition: opacity .3s;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

#inspect[hidden] {
  display: none;
}

.ins {
  padding: 14px 18px 18px;
}

.ins .art {
  margin: 0 -18px 10px;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 8px 0 10px;
  font-size: 13.5px;
}

.facts dt {
  font-weight: 750;
  font-stretch: 80%;
}

.facts dd {
  margin: 0;
}

.facts .eth {
  height: 11px;
}

/* ---- the transaction note */
.txnote {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: calc(var(--till) + 18px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--neon);
  color: var(--ink);
  font-weight: 650;
  box-shadow: 8px 9px 0 rgba(0, 0, 0, .55);
  max-width: min(560px, 92vw);
}

.txnote .dm {
  height: 11px;
  width: auto;
  flex: none;
}

.txnote.bad {
  background: var(--paper);
  color: var(--red);
}

/* ---- the switches that set the local store's state */
#review {
  position: fixed;
  z-index: 9;
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: rgba(20, 20, 19, .92);
  color: #9c9a93;
  font-size: 11px;
  font-weight: 600;
  font-stretch: 80%;
  border: 1px solid #2c2c2a;
}

#review b {
  color: #d6d6d0;
  margin: 0 4px 0 6px;
}

#review button {
  border: 0;
  background: #262624;
  color: #d6d6d0;
  padding: 3px 7px;
  cursor: pointer;
  font-size: 11px;
}

#review button.on {
  background: var(--neon);
  color: var(--ink);
}

/* ---- short screens */
@media (max-height: 1000px) and (min-width: 761px) {
  #card .note:not(.keep) {
    display: none;
  }
}

@media (max-height: 860px) and (min-width: 761px) {
  #sign {
    top: 22px;
  }

  #sign .mark .dm {
    height: 25px;
  }

  #sign .sub {
    display: none;
  }

  #card {
    top: 210px;
  }

  #price {
    top: 62px;
  }

  #desk {
    top: 308px;
  }

  #desk .note {
    display: none;
  }

  #desk .chart {
    margin-top: 8px;
  }

  #card .note:not(.keep) {
    display: none;
  }

  #card .note.keep {
    margin-top: 6px;
    font-size: 12px;
  }

  #greeter .who {
    width: 80px;
  }

  #greeter .bubble {
    width: 280px;
    margin-bottom: 26px;
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  #greeter .thumbs {
    display: none;
  }

  #greeter .bubble p {
    font-size: 12.5px;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  :root {
    --col: 246px;
    --gap: 14px;
  }

  #greeter .bubble {
    width: 250px;
  }

  #links a {
    padding: 0 9px;
  }

  #tally .cell {
    padding: 0 9px;
  }
}

/* ---- phones: the page scrolls, the floor sits in the middle of it */
@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  #app {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 16px calc(var(--till) + 40px);
  }

  #sign,
  #price,
  #desk,
  #card,
  #greeter,
  #wallet {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin-right: var(--d);
  }

  #wallet {
    order: 0;
    align-self: flex-end;
    margin: 0 0 -14px;
  }

  #sign {
    order: 1;
  }

  #greeter {
    order: 2;
    margin-top: -10px;
  }

  #price {
    order: 3;
  }

  #floorwrap {
    order: 4;
  }

  #desk {
    order: 5;
  }

  #card {
    order: 6;
  }

  #review {
    order: 8;
  }

  #floorwrap {
    position: relative;
    inset: auto;
    height: 62vh;
    margin: 0 -16px;
    border-top: 3px solid #2c2c2a;
    border-bottom: 3px solid #2c2c2a;
  }

  #floor {
    touch-action: pan-y;
  }

  #hint {
    bottom: 8px;
  }

  #greeter .who {
    width: 72px;
  }

  .wire,
  #atmos .pools {
    display: none;
  }

  #greeter .bubble {
    width: auto;
    flex: 1;
    margin-bottom: 26px;
  }

  #sign .sub {
    display: block;
  }

  #tally {
    display: none;
  }

  #links a {
    padding: 0 10px;
    font-size: 12px;
  }

  #inspect {
    inset: 0;
    width: auto;
    bottom: var(--till);
  }

  #review {
    position: static;
    transform: none;
    max-width: 100%;
  }

  .cols {
    grid-template-columns: 1fr;
  }

  .slip {
    padding: 14px 16px 22px;
  }
}


/* ---- the shutter: the store reading the chain before it opens */
/* the roller shutter: ribbed steel, darker at the sides, the store's light spilling out under it as it goes up */
#shutter {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(180deg, #45474a 0 1px, #34363a 1px 19px, #4e5054 19px 21px, #202124 21px 26px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .7);
  transition: transform .9s cubic-bezier(.6, 0, .3, 1);
}
#shutter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 90px;
  background: linear-gradient(180deg, rgba(255, 240, 205, .22), rgba(255, 240, 205, 0));
  pointer-events: none;
}
#shutter.up { transform: translateY(-104%); }
#shutter .msg {
  padding: 16px 22px;
  background: radial-gradient(130% 150% at 28% 0%, #12130e, #070806 70%);
  border-radius: 3px;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), 0 0 0 6px #1c1c1a, 0 0 0 7px #3a3a36, 0 0 50px rgba(204, 255, 0, .12);
}
#shutter .msg .dm { height: 14px; width: auto; fill: var(--neon); }
#shutter .msg .dm .off { fill: #2a2b24; }
#shutter .grip {
  position: absolute;
  left: calc(50% - 60px);
  bottom: 26px;
  width: 120px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e3e5e7, #8f9296 60%, #6a6d70);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
}

/* ---- the coupons at the door */
.mycp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--neon);
}
.mycp b { line-height: 0; }
.mycp .dm { height: 22px; width: auto; }
.mycp span { color: #d6d4cc; font-size: 12.5px; font-weight: 700; font-stretch: 80%; }
.note.neonbg { background: var(--neon); padding: 8px 10px; font-weight: 600; }
.art.cp { max-width: 460px; }

/* ---- the plug link, the lookup, the wallets */
.pluglink { margin-top: 16px; padding: 12px 14px; border: 2px dashed #a7a399; font-size: 13.5px; }
.pluglink code {
  display: block;
  margin: 8px 0 4px;
  padding: 6px 8px;
  background: #e6e3da;
  font: 600 12.5px/1.3 ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.pluglink a.box { text-decoration: none; }
.slip h4 { margin: 18px 0 2px; font-size: 16px; font-stretch: 85%; }
.box.wl { gap: 10px; padding-left: 16px; }
.box.wl img { width: 22px; height: 22px; }
#links button {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid #222220;
  background: transparent;
  color: #d6d4cc;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 12.5px;
  cursor: pointer;
}
#links button:hover { color: var(--neon); }
#review a { color: #d6d4cc; background: #262624; padding: 3px 7px; text-decoration: none; }
#review #chainblock { margin-left: 6px; color: #8faa00; }

/* the camera's two views; the shelf on sale only while one is on sale */
body[data-sold="1"] #hint [data-view="shelf"],
body[data-phase="pre"] #hint [data-view="shelf"],
body[data-phase="closed"] #hint [data-view="shelf"] {
  display: none;
}

/* a second write while one is waiting: the note shakes instead */
.txnote.shake {
  animation: shake .4s;
}

@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* on chain the store is the real one: no switches for the preview */
body.onchain #review {
  display: none;
}