@font-face {
  font-family: "ABCDiatype";
  src: url("./font/ABCDiatype-Regular-Trial.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fff;
  --ink: #111;
  --muted: rgba(17, 17, 17, 0.18);
  --blue: #1557ff;
  --green: #19e829;
  --line: #111;
  --line-picker-color: #111;
  --panel-bg: #111;
  --panel-ink: #fff;
  --panel-muted: rgba(255, 255, 255, 0.36);
  --node-w: clamp(92px, 9.4vw, 178px);
  --node-w-wide: clamp(118px, 12.4vw, 224px);
  --node-w-small: clamp(72px, 7.1vw, 126px);
  color: var(--ink);
  background: var(--paper);
  font-family: "ABCDiatype", Arial, Helvetica, sans-serif;
}

.is-dark {
  --paper: #050505;
  --ink: #f4f4ef;
  --muted: rgba(244, 244, 239, 0.2);
  --line: #f4f4ef;
  --line-picker-color: #f4f4ef;
  --panel-bg: #f4f4ef;
  --panel-ink: #050505;
  --panel-muted: rgba(5, 5, 5, 0.38);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
}

.stage {
  position: fixed;
  inset: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  cursor: default;
  isolation: isolate;
  perspective: 680px;
  perspective-origin: 48% 44%;
}

.graph-mark {
  position: fixed;
  z-index: 6;
  top: clamp(18px, 2.4vw, 38px);
  left: clamp(22px, 2.7vw, 46px);
  width: clamp(104px, 7.7vw, 142px);
  height: auto;
  opacity: var(--splash-mark-opacity, 0);
  transform:
    translate3d(
      calc((1 - var(--splash-mark-opacity, 0)) * -10px),
      calc((1 - var(--splash-mark-opacity, 0)) * -8px),
      0
    )
    scale(calc(0.94 + var(--splash-mark-opacity, 0) * 0.06));
  transition:
    opacity 180ms linear,
    transform 180ms linear;
  pointer-events: none;
}

.menu-mark {
  position: fixed;
  z-index: 100;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  width: clamp(112px, 8.4vw, 154px);
  height: auto;
  opacity: var(--network-intro, 0);
  filter: none;
  transform: translate3d(0, calc((1 - var(--network-intro, 0)) * 12px), 0);
  transition:
    opacity 180ms linear,
    filter 180ms linear,
    transform 180ms linear;
  pointer-events: none;
}

.intro-screen {
  position: fixed;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  opacity: var(--intro-opacity, 1);
  transform: translate3d(0, calc(var(--network-intro, 0) * -18px), 0);
  pointer-events: none;
  transition:
    opacity 180ms linear,
    transform 180ms linear;
}

.intro-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.24vw, 21px);
  width: min(48vw, 680px);
  margin: 0 auto;
  opacity: var(--splash-nav-opacity, 0);
  transform: translate3d(0, calc((1 - var(--splash-nav-opacity, 0)) * 10px), 0);
  font-size: clamp(10px, 0.82vw, 16px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    opacity 180ms linear,
    transform 180ms linear;
}

.intro-jamuna {
  color: var(--ink);
}

.intro-red {
  color: #940f0f;
}

.intro-blue {
  color: #004dff;
}

.intro-green {
  color: #04f200;
}

.intro-line {
  display: block;
  flex: 0 1 clamp(18px, 1.9vw, 38px);
  height: 1px;
  background: #d7d7d7;
}

.is-dark .intro-line {
  background: rgba(244, 244, 239, 0.22);
}

.is-surface-dark .graph-mark {
  filter: invert(1) grayscale(1) contrast(1.18);
}

.is-surface-dark .menu-mark {
  filter: invert(1);
}

.background-menu,
.line-menu,
.density-menu {
  position: fixed;
  z-index: 101;
  right: clamp(18px, 2.2vw, 34px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--panel-muted);
  border-radius: 999px;
  background: var(--panel-bg);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 180ms linear,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background 180ms linear,
    border-color 180ms linear;
}

.background-menu {
  bottom: calc(clamp(18px, 2.2vw, 34px) + clamp(80px, 6.8vw, 126px));
}

.line-menu {
  bottom: calc(clamp(18px, 2.2vw, 34px) + clamp(80px, 6.8vw, 126px) + 48px);
  width: clamp(144px, 12vw, 190px);
}

.density-menu {
  bottom: calc(clamp(18px, 2.2vw, 34px) + clamp(80px, 6.8vw, 126px) + 96px);
  width: clamp(144px, 12vw, 190px);
}

.is-bg-menu-open .background-menu {
  opacity: var(--network-intro, 0);
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.is-line-menu-open .line-menu {
  opacity: var(--network-intro, 0);
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.is-density-menu-open .density-menu {
  opacity: var(--network-intro, 0);
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.line-color-preview,
.density-preview {
  flex: 0 0 auto;
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--panel-muted);
  border-radius: 50%;
  background: var(--line-picker-color);
}

.density-preview {
  background:
    radial-gradient(circle at 35% 35%, var(--panel-ink) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 36%, var(--panel-ink) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 68%, var(--panel-ink) 0 2px, transparent 2.5px);
}

.line-color-slider,
.density-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.line-color-slider {
  accent-color: var(--line-picker-color);
}

.density-slider {
  accent-color: var(--panel-ink);
}

.color-swatch,
.color-custom {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--panel-muted);
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
}

.color-swatch {
  padding: 0;
}

.color-swatch.is-active {
  outline: 1px solid var(--panel-ink);
  outline-offset: 3px;
}

.color-custom {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, #940f0f, #004dff 50%, #04f200);
}

.color-input {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.network,
.nodes {
  position: absolute;
  inset: 0;
}

.network {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--network-intro, 0);
}

.nodes {
  z-index: 7;
  pointer-events: none;
  transform-style: flat;
  opacity: var(--network-intro, 0);
}

.work-node {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, var(--node-w));
  opacity: var(--opacity, 0);
  transform:
    translate3d(var(--tx, 0), var(--ty, 0), 0)
    scale(var(--scale, 1));
  transform-origin: center;
  transform-style: flat;
  backface-visibility: hidden;
  color: var(--label-color, var(--blue));
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  will-change: transform, opacity, filter;
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-node.is-wide {
  width: var(--node-w-wide);
}

.work-node.is-small {
  width: var(--node-w-small);
}

.work-node.is-floating .work-media {
  visibility: hidden;
  opacity: 0;
}

.work-node.is-floating {
  width: clamp(84px, 7vw, 130px);
}

.work-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
  backface-visibility: hidden;
  clip-path: polygon(
    var(--warp-tl, 0%) 0,
    calc(100% - var(--warp-tr, 0%)) 0,
    calc(100% - var(--warp-br, 0%)) 100%,
    var(--warp-bl, 0%) 100%
  );
  filter: saturate(0.86) contrast(0.95);
  transform: translate3d(0, var(--media-y, 0), 0) scaleY(var(--warp-y, 1));
  transition:
    clip-path 180ms linear,
    filter 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-node:hover .work-media,
.work-node.is-focused .work-media {
  --media-y: -2px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: saturate(1.05) contrast(1.04);
}

.work-node.is-dimmed .work-media {
  opacity: 0.24;
}

.work-node.is-dimmed .work-meta {
  opacity: 0.24;
}

video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.012);
  transform-origin: center;
  backface-visibility: hidden;
}

.work-meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-rows: min-content;
  width: max-content;
  max-width: min(16rem, 72vw);
  margin-top: clamp(3px, 0.32vw, 5px);
  font-size: clamp(6px, 0.42vw, 8px);
  font-weight: 400;
  line-height: 1.01;
  text-transform: uppercase;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(var(--meta-scale, 1));
  transform-origin: top left;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.work-node.meta-right .work-meta {
  position: absolute;
  top: 0;
  left: calc(100% + clamp(4px, 0.42vw, 8px));
  margin-top: 0;
}

.work-node.meta-left .work-meta {
  position: absolute;
  top: 0;
  right: calc(100% + clamp(4px, 0.42vw, 8px));
  margin-top: 0;
  transform-origin: top right;
}

.work-node.meta-above .work-meta {
  position: absolute;
  bottom: calc(100% + clamp(4px, 0.42vw, 7px));
  left: 0;
  margin-top: 0;
  transform-origin: bottom left;
}

.work-title {
  color: var(--label-color, var(--blue));
  font-weight: 400;
}

.work-year,
.work-type {
  color: var(--muted);
}

.work-type {
  font-weight: 400;
}

.work-node:hover .work-year,
.work-node:hover .work-type,
.work-node.is-focused .work-year,
.work-node.is-focused .work-type {
  color: rgba(17, 17, 17, 0.34);
}

.is-dark .work-node:hover .work-year,
.is-dark .work-node:hover .work-type,
.is-dark .work-node.is-focused .work-year,
.is-dark .work-node.is-focused .work-type {
  color: rgba(244, 244, 239, 0.42);
}

.scroll-field {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --node-w: clamp(72px, 23vw, 112px);
    --node-w-wide: clamp(92px, 30vw, 142px);
    --node-w-small: clamp(58px, 19vw, 92px);
  }

  .stage {
    cursor: default;
    perspective: 520px;
    perspective-origin: 50% 42%;
  }

  .graph-mark {
    top: 15px;
    left: 15px;
    width: clamp(68px, 20vw, 86px);
  }

  .menu-mark {
    right: 10px;
    bottom: 10px;
    width: clamp(72px, 24vw, 96px);
  }

  .background-menu {
    right: 10px;
    bottom: calc(10px + clamp(62px, 22vw, 88px));
    gap: 7px;
    padding: 8px 9px;
  }

  .line-menu {
    right: 10px;
    bottom: calc(10px + clamp(62px, 22vw, 88px) + 44px);
    width: min(42vw, 168px);
    gap: 7px;
    padding: 8px 9px;
  }

  .density-menu {
    right: 10px;
    bottom: calc(10px + clamp(62px, 22vw, 88px) + 88px);
    width: min(42vw, 168px);
    gap: 7px;
    padding: 8px 9px;
  }

  .color-swatch,
  .color-custom,
  .line-color-preview,
  .density-preview {
    width: 17px;
    height: 17px;
  }

  .intro-screen {
    padding: 0 20px;
  }

  .intro-nav {
    flex-wrap: wrap;
    gap: 8px 10px;
    width: min(84vw, 340px);
    font-size: 10px;
    white-space: normal;
  }

  .intro-line {
    flex-basis: 22px;
  }

  .work-meta {
    max-width: 34vw;
    margin-top: 3px;
    font-size: 5.5px;
    line-height: 1;
  }

  .work-node.meta-right .work-meta {
    left: 0;
    top: calc(100% + 4px);
  }

  .work-node.meta-left .work-meta {
    left: 0;
    right: auto;
    top: calc(100% + 4px);
    transform-origin: top left;
  }

  .work-node.meta-above .work-meta {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 3px;
    transform-origin: top left;
  }
}

@media (max-width: 420px) {
  :root {
    --node-w: clamp(64px, 22vw, 96px);
    --node-w-wide: clamp(82px, 29vw, 122px);
    --node-w-small: clamp(52px, 18vw, 78px);
  }

  .intro-nav {
    width: 78vw;
    font-size: 9px;
  }

  .intro-line {
    flex-basis: 18px;
  }

  .work-meta {
    max-width: 31vw;
    font-size: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-node,
  .work-media {
    transition-duration: 1ms;
  }
}