/*
 * GENERATED FILE - do not edit by hand.
 * Source: tools/gen-desk-css.py (positions measured from the original site).
 */

/* ---------- static desk styles ---------- */
.desk-wrap {
  container-type: inline-size;
  max-width: 1400px;
  margin: 0 auto;
}
.desk {
  position: relative;
}
.desk-item {
  position: absolute;
}
.desk-item__hit {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
div.desk-item__hit { cursor: default; }
.desk-item__hit img {
  display: block;
  width: 100%;
  height: auto;
}
.desk-item__hit:focus { outline: none; }
.desk-item__hit:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.desk-tip {
  position: absolute;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(75, 5, 5, 0.94);
  color: #fff;
  border-radius: 4px;
  font-family: "Allura", sans-serif;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  z-index: 1;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out;
  pointer-events: none;
}
.desk-tip p { margin: 0; }
.desk-tip::after {
  content: "";
  position: absolute;
  border: calc(var(--bw) * var(--u)) solid transparent;
}
/* tooltip below the object */
.desk-tip--bottom { transform: translate(-50%, 8px); }
.desk-tip--bottom::after { bottom: 100%; left: calc(50% - var(--bw) * var(--u)); border-bottom-color: rgba(75, 5, 5, 0.94); }
/* tooltip to the left of the object */
.desk-tip--left { transform: translate(-8px, -50%); }
.desk-tip--left::after { left: 100%; top: calc(50% - var(--bw) * var(--u)); border-left-color: rgba(75, 5, 5, 0.94); }
/* tooltip to the right of the object */
.desk-tip--right { transform: translate(8px, -50%); }
.desk-tip--right::after { right: 100%; top: calc(50% - var(--bw) * var(--u)); border-right-color: rgba(75, 5, 5, 0.94); }

/* open state: tap/click/Enter toggles .is-open (site.js); real mouse hover also opens */
.desk-item.is-open { z-index: 50 !important; }
.desk-item.is-open .desk-tip { visibility: visible; opacity: 1; }
.desk-item.is-open .desk-tip--bottom { transform: translate(-50%, 0); }
.desk-item.is-open .desk-tip--left,
.desk-item.is-open .desk-tip--right { transform: translate(0, -50%); }
@media (hover: hover) {
  .desk-item.has-tip:hover { z-index: 50 !important; }
  .desk-item.has-tip:hover .desk-tip { visibility: visible; opacity: 1; }
  .desk-item.has-tip:hover .desk-tip--bottom { transform: translate(-50%, 0); }
  .desk-item.has-tip:hover .desk-tip--left,
  .desk-item.has-tip:hover .desk-tip--right { transform: translate(0, -50%); }
}

.desk-item--latte .desk-tip { color: #f8f2f2; box-shadow: 7px 0 25px 0 rgba(0, 0, 0, 0.28); }
.desk-item--script .desk-tip { box-shadow: none; }

.desk-text {
  position: absolute;
  margin: 0;
  font-family: "Rosarivo", sans-serif;
  font-weight: 600;
  color: #fff;
  text-align: center;
  z-index: 1;
}
.desk-text a { color: #fff; text-decoration: none; }
.desk-text--buy { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .desk-tip { transition: none; }
}

/* ---------- desktop (reference 1440px) ---------- */
.desk {
  --u: calc(100cqw / 1400);
  height: calc(4307 * var(--u));
}

.desk-item--portrait {
  left: calc(622 * var(--u));
  top: calc(625 * var(--u));
  width: calc(553 * var(--u));
  z-index: 5;
}

.desk-item--glasses {
  left: calc(38 * var(--u));
  top: calc(1057 * var(--u));
  width: calc(554 * var(--u));
  z-index: 1;
}

.desk-item--placecard {
  left: calc(777 * var(--u));
  top: calc(1217 * var(--u));
  width: calc(569 * var(--u));
  z-index: 1;
}

.desk-item--latte {
  left: calc(34 * var(--u));
  top: calc(22 * var(--u));
  width: calc(670 * var(--u));
  z-index: 6;
}

.desk-item--latte .desk-tip {
  width: calc(550 * var(--u));
  padding: calc(10 * var(--u));
  font-size: calc(30 * var(--u));
  word-spacing: calc(4 * var(--u));
  --bw: 26;
  left: calc(50% + 0 * var(--u));
  top: calc(100% + 19 * var(--u));
}

.desk-item--candle {
  left: calc(784 * var(--u));
  top: calc(22 * var(--u));
  width: calc(516 * var(--u));
  z-index: 6;
}

.desk-item--candle .desk-tip {
  width: calc(550 * var(--u));
  padding: calc(10 * var(--u));
  font-size: calc(28 * var(--u));
  word-spacing: calc(2 * var(--u));
  --bw: 25;
  right: calc(100% + 34 * var(--u));
  top: calc(50% + 5 * var(--u));
}

.desk-item--script {
  left: calc(26 * var(--u));
  top: calc(1519.8 * var(--u));
  width: calc(931 * var(--u));
  z-index: 7;
}

.desk-item--script .desk-tip {
  width: calc(425 * var(--u));
  padding: calc(10 * var(--u));
  font-size: calc(28 * var(--u));
  word-spacing: calc(2 * var(--u));
  --bw: 19;
  left: calc(100% + -106 * var(--u));
  top: calc(50% + -59.1 * var(--u));
}

.desk-item--fox {
  left: calc(535 * var(--u));
  top: calc(2382.8 * var(--u));
  width: calc(885 * var(--u));
  z-index: 7;
}

.desk-item--fox .desk-tip {
  width: calc(550 * var(--u));
  padding: calc(10 * var(--u));
  font-size: calc(28 * var(--u));
  word-spacing: calc(2 * var(--u));
  --bw: 28;
  left: calc(50% + 0 * var(--u));
  top: calc(100% + 16 * var(--u));
}

.desk-item--leash {
  left: calc(-38 * var(--u));
  top: calc(2497.8 * var(--u));
  width: calc(562 * var(--u));
  z-index: 6;
}

.desk-item--leash .desk-tip {
  width: calc(635 * var(--u));
  padding: calc(10 * var(--u));
  font-size: calc(28 * var(--u));
  word-spacing: calc(2 * var(--u));
  --bw: 25;
  left: calc(100% + 24 * var(--u));
  top: calc(50% + 305 * var(--u));
}

.desk-item--notepad {
  left: calc(646 * var(--u));
  top: calc(3141.8 * var(--u));
  width: calc(774 * var(--u));
  z-index: 5;
}

.desk-item--notepad .desk-tip {
  width: calc(550 * var(--u));
  padding: calc(10 * var(--u));
  font-size: calc(28 * var(--u));
  word-spacing: calc(2 * var(--u));
  --bw: 25;
  right: calc(100% + 24 * var(--u));
  top: calc(50% + 64.95 * var(--u));
}

.desk-text--hint {
  left: calc(216 * var(--u));
  top: calc(827.8 * var(--u));
  width: calc(272.5 * var(--u));
  font-size: calc(25 * var(--u));
  line-height: calc(63 * var(--u));
}

.desk-text--buy {
  left: calc(906 * var(--u));
  top: calc(1768.8 * var(--u));
  width: calc(340 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: calc(68 * var(--u));
}

/* ---------- tablet (reference 1024px) ---------- */
@media (max-width: 1024px) {
  .desk {
    --u: min(1px, 100cqw / 748);
    height: calc(2319.8 * var(--u) + max(0px, (50cqw - 118 * var(--u)) * 1.1489 - 393 * var(--u)));
  }

  .desk-item--portrait {
    left: calc(359 * var(--u));
    top: calc(355 * var(--u));
    width: calc(285 * var(--u));
    z-index: 5;
  }

  .desk-item--glasses {
    left: calc(42 * var(--u));
    top: calc(573 * var(--u));
    width: calc(296 * var(--u));
    z-index: 1;
  }

  .desk-item--placecard {
    left: calc(387 * var(--u) + (100cqw - 387 * var(--u)) * 0.09);
    top: calc(681 * var(--u));
    width: calc((100cqw - 387 * var(--u)) * 0.82);
    z-index: 1;
  }

  .desk-item--latte {
    left: calc(34 * var(--u));
    top: calc(22 * var(--u));
    width: calc(386 * var(--u));
    z-index: 6;
  }

  .desk-item--latte .desk-tip {
    width: calc(300 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(17 * var(--u));
    word-spacing: calc(4 * var(--u));
    --bw: 26;
    left: calc(50% + 0 * var(--u));
    top: calc(100% + 20 * var(--u));
  }

  .desk-item--candle {
    left: calc(50cqw + 84 * var(--u));
    top: calc(22 * var(--u));
    width: calc(50cqw - 118 * var(--u));
    z-index: 6;
  }

  .desk-item--candle .desk-tip {
    width: calc(400 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(18 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 25;
    right: calc(100% + 24 * var(--u));
    top: calc(50% + 5 * var(--u));
  }

  .desk-item--script {
    left: calc(36 * var(--u));
    top: calc(858 * var(--u) + max(0px, (50cqw - 118 * var(--u)) * 1.1489 - 393 * var(--u)));
    width: calc(516 * var(--u));
    z-index: 7;
  }

  .desk-item--script .desk-tip {
    width: calc(285 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(17 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 19;
    left: calc(100% + -156 * var(--u));
    top: calc(50% + -39.05 * var(--u));
  }

  .desk-item--fox {
    left: calc(324 * var(--u));
    top: calc(1338 * var(--u) + max(0px, (50cqw - 118 * var(--u)) * 1.1489 - 393 * var(--u)));
    width: calc(429 * var(--u));
    z-index: 7;
  }

  .desk-item--fox .desk-tip {
    width: calc(350 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(17 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 28;
    left: calc(50% + 0 * var(--u));
    top: calc(100% + 15.9 * var(--u));
  }

  .desk-item--leash {
    left: calc(28 * var(--u));
    top: calc(1397 * var(--u) + max(0px, (50cqw - 118 * var(--u)) * 1.1489 - 393 * var(--u)));
    width: calc(45.86cqw - 65 * var(--u));
    z-index: 6;
  }

  .desk-item--leash .desk-tip {
    width: calc(400 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(17 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 25;
    left: calc(100% + -16 * var(--u));
    top: calc(50% + 204.95 * var(--u));
  }

  .desk-item--notepad {
    left: calc(368 * var(--u));
    top: calc(1759 * var(--u) + max(0px, (50cqw - 118 * var(--u)) * 1.1489 - 393 * var(--u)));
    width: calc(391 * var(--u));
    z-index: 5;
  }

  .desk-item--notepad .desk-tip {
    width: calc(305 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(19 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 25;
    right: calc(100% + -26 * var(--u));
    top: calc(50% + 85 * var(--u));
  }

  .desk-text--hint {
    left: calc(92 * var(--u));
    top: calc(466 * var(--u) + max(0px, (50cqw - 118 * var(--u)) * 1.1489 - 393 * var(--u)));
    width: calc(238 * var(--u));
    font-size: calc(19 * var(--u));
    line-height: calc(28.5 * var(--u));
  }

  .desk-text--buy {
    left: calc(453 * var(--u));
    top: calc(975 * var(--u) + max(0px, (50cqw - 118 * var(--u)) * 1.1489 - 393 * var(--u)));
    width: calc(235 * var(--u));
    font-size: calc(27 * var(--u));
    line-height: calc(40.5 * var(--u));
  }
}

/* ---------- phone (reference 390px) ---------- */
@media (max-width: 767px) {
  .desk {
    --u: min(1px, 100cqw / 340);
    height: calc(1117 * var(--u));
  }

  .desk-item--portrait {
    left: calc(178 * var(--u));
    top: calc(160 * var(--u));
    width: calc(127 * var(--u));
    z-index: 5;
  }

  .desk-item--glasses {
    left: calc(36 * var(--u));
    top: calc(274 * var(--u));
    width: calc(109 * var(--u));
    z-index: 1;
  }

  .desk-item--placecard {
    left: calc(206 * var(--u));
    top: calc(296 * var(--u));
    width: calc(129 * var(--u));
    z-index: 1;
  }

  .desk-item--latte {
    left: calc(10 * var(--u));
    top: calc(10 * var(--u));
    width: calc(181 * var(--u));
    z-index: 7;
  }

  .desk-item--latte .desk-tip {
    width: calc(181 * var(--u));
    padding: calc(5 * var(--u));
    font-size: calc(16 * var(--u));
    word-spacing: calc(4 * var(--u));
    --bw: 14;
    left: calc(50% + 0 * var(--u));
    top: calc(100% + 8 * var(--u));
  }

  .desk-item--candle {
    left: calc(50cqw + 34 * var(--u));
    top: calc(22 * var(--u));
    width: calc(107 * var(--u));
    z-index: 7;
  }

  .desk-item--candle .desk-tip {
    width: calc(141 * var(--u));
    padding: calc(5 * var(--u));
    font-size: calc(16 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 14;
    right: calc(100% + 24 * var(--u));
    top: calc(50% + 55.05 * var(--u));
  }

  .desk-item--script {
    left: calc(26 * var(--u));
    top: calc(374.3 * var(--u));
    width: calc(211 * var(--u));
    z-index: 3;
  }

  .desk-item--script .desk-tip {
    width: calc(194.3 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(16 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 17;
    left: calc(100% + -96 * var(--u));
    top: calc(50% + -19.05 * var(--u));
  }

  .desk-item--fox {
    left: calc(165 * var(--u));
    top: calc(594.3 * var(--u));
    width: calc(171 * var(--u));
    z-index: 6;
  }

  .desk-item--fox .desk-tip {
    width: calc(220 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(16 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 14;
    left: calc(50% + 0 * var(--u));
    top: calc(100% + 15 * var(--u));
  }

  .desk-item--leash {
    left: calc(0 * var(--u));
    top: calc(596.3 * var(--u));
    width: calc(138 * var(--u));
    z-index: 8;
  }

  .desk-item--leash .desk-tip {
    width: calc(230 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(16 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 14;
    left: calc(100% + -26 * var(--u));
    top: calc(50% + 54.9 * var(--u));
  }

  .desk-item--notepad {
    left: calc(149 * var(--u));
    top: calc(794.3 * var(--u));
    width: calc(189 * var(--u));
    z-index: 4;
  }

  .desk-item--notepad .desk-tip {
    width: calc(190 * var(--u));
    padding: calc(10 * var(--u));
    font-size: calc(16 * var(--u));
    word-spacing: calc(2 * var(--u));
    --bw: 14;
    right: calc(100% + -76 * var(--u));
    top: calc(50% + 64.95 * var(--u));
  }

  .desk-text--hint {
    left: calc(17 * var(--u));
    top: calc(217.3 * var(--u));
    width: min(50cqw - 20 * var(--u), 238 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(18 * var(--u));
  }

  .desk-text--buy {
    left: calc(208 * var(--u));
    top: calc(435.3 * var(--u));
    width: calc(129 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(21 * var(--u));
  }

  .desk-item--latte .desk-tip {
    text-align: center;
  }
}