@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/bricolage-grotesque-bold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  background: #fff;
  color: #000;
  font-family: "Bricolage Grotesque", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow: hidden; }

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}

.artboard {
  position: relative;
  flex: none;
  width: 1440px;
  height: 1024px;
  transform: scale(var(--fit, 1));
  transform-origin: center;
}

.brand {
  position: absolute;
  left: 676.3568px;
  top: 77px;
  width: 86.4863px;
  height: 63.583px;
  font-size: 23.722px;
  font-weight: 700;
  letter-spacing: -0.4744px;
  line-height: normal;
}

.brand span { position: absolute; display: block; white-space: nowrap; }
.brand-first { left: 24.3396px; top: 0; }
.brand-draft { left: 23.7219px; top: 17.7915px; }
.brand-labs { left: 38.4864px; top: 35.583px; }
.brand-mark { position: absolute; left: -2.568px; top: 6.426px; display: block; }

.scene {
  position: absolute;
  left: 348.9336px;
  top: 234.6296px;
  width: 766.2148px;
  height: 542.7549px;
}

.scene-canvas {
  position: relative;
  width: 766.2148px;
  height: 542.7549px;
  transform-origin: top left;
}

.table-art { position: absolute; display: block; left: 1.3271px; top: 41.6482px; }
.object { position: absolute; display: block; max-width: none; }
.plant { left: 0; top: 2.1667px; transform-origin: 50% 95%; animation-delay: -1.1s; }
.pencil-stand { left: 137.3374px; top: 77.7982px; animation-delay: -2.4s; }
.controller { left: 71.8569px; top: 153.8241px; animation-delay: -3.1s; }
.ipad { left: 177.0308px; top: 142.6685px; animation-delay: -0.8s; }
.paper-left { left: 39.0552px; top: 231.5269px; animation-delay: -2.9s; }
.paper-middle { left: 312.6177px; top: 168.9977px; animation-delay: -4.2s; }
.monitor { left: 224.5767px; top: 0; animation-delay: -3.8s; }
.open-book { left: 479.2554px; top: 254.1047px; animation-delay: -0.5s; }
.sticky-note { left: 138.9893px; top: 242.1141px; animation-delay: -5.1s; }
.pen { left: 442.1772px; top: 241.6665px; animation-delay: -1.7s; }
.laptop { left: 465.4717px; top: 51.3199px; animation-delay: -5.3s; }
.book-stack { left: 670.9316px; top: 225.1138px; animation-delay: -3.6s; }
.cup { left: 659.5366px; top: 173.6012px; animation-delay: -1.4s; }
.phone { left: 627.4214px; top: 261.2372px; animation-delay: -2.2s; }
.chair { left: 257.3198px; top: 366.644px; transform-origin: 50% 25%; animation-delay: -4.8s; }

.bob { animation-name: bob; animation-duration: 4.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.sway { animation-name: sway; animation-duration: 5.3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.tilt { animation-name: tilt; animation-duration: 4.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

@keyframes bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -9px, 0); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.3deg) translateY(1px); }
  50% { transform: rotate(1.3deg) translateY(-4px); }
}
@keyframes tilt {
  0%, 100% { transform: rotate(-1.1deg) translateY(1px); }
  50% { transform: rotate(1.1deg) translateY(-6px); }
}

.coming-soon {
  position: absolute;
  left: 638px;
  top: 849.583px;
  width: 163.2px;
  height: 98px;
  text-align: center;
  font-size: 46.08px;
  font-weight: 700;
  letter-spacing: -1.8432px;
  line-height: normal;
}

.coming-soon span { position: absolute; display: block; width: 100%; white-space: nowrap; }
.coming { top: 0; color: #939393; }
.soon { top: 43px; color: #000; }

@media (max-width: 800px) {
  .artboard { width: 393px; height: 852px; }
  .brand { left: 152.7976px; top: 106px; }
  .scene { left: 23.6426px; top: 249.583px; width: 344.7964px; height: 244.2397px; }
  .scene-canvas { transform: scale(0.45); }
  .coming-soon { left: 23.6426px; top: 573.8227px; width: 344.7964px; height: 64px; font-size: 30.72px; letter-spacing: -1.2288px; }
  .soon { top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .object { animation: none; }
}