:root {
  --black: #121212;
  --beige400: #DCD8D3;
  --beige100: #F1F0EA;
  --beige300: #CFCFCF;
  --pureWhite: #FFFFFF;
  --grey: #545454;
  --red: #F95D3B;
  --enterBorder: #0D0D0D;
  --enterAlphaHover: 70%;
}

body .blocks .blocks-inner .block-line, body .controller {
  transition: height 0.4s;
}

body.grid-mode-2 .blocks .blocks-inner .block-line {
  height: calc(40vh - 5px);
}
body.grid-mode-2 .blocks .blocks-inner .block-line-enter-1,
body.grid-mode-2 .blocks .blocks-inner .block-line-enter-4 {
  display: none;
}
body.grid-mode-2 .blocks .blocks-inner .block-line-enter-2 {
  margin-top: 5px;
}
body.grid-mode-2 .blocks .blocks-inner .block-line-enter-3 {
  margin-bottom: 5px;
}
body.grid-mode-2 .controller .controller-inner .buttons .knob.grid .knob-inner:before {
  transform: rotate(0deg);
}
body.grid-mode-2 .controller .controller-inner .buttons .knob.grid .knob-inner .x2 {
  display: block;
}
body.grid-mode-2 .controller .controller-inner .buttons .knob.grid .knob-inner .x4 {
  display: none;
}
body.content-mode-chart .controller .controller-inner .buttons .knob.content .knob-inner:before {
  transform: rotate(180deg);
}
body.content-mode-chart .blocks .blocks-inner .block-line .block .block-content .cache {
  opacity: 0;
}

body.lighting-mode-dark {
  --black: #B0AEA6;
  --beige400: #1B1819;
  --beige100: #2B2829;
  --beige300: #3D3D3D;
  --pureWhite: #0F0B0C;
  --grey: #545454;
  --red: #DD4C27;
  --enterBorder: #FFFFFF;
  --enterAlphaHover: 40%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.lighting-mode-dark .page-project .info .details .agency {
  color: var(--beige400);
}
body.lighting-mode-dark .page-project .info .details .agency .label {
  color: #6A6762;
}
body.lighting-mode-dark .page-project .info .details .agency:is(a):hover {
  background-color: #A19F98;
  box-shadow: inset 0 0 0 2px var(--black);
}
body.lighting-mode-dark .about-container {
  background-color: var(--pureWhite);
  color: var(--black);
}
body.lighting-mode-dark .about-portrait {
  background-color: var(--beige100);
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
}
body.lighting-mode-dark .about-panel.portrait-reveal .about-portrait.is-loaded {
  background-image: none;
}
body.lighting-mode-dark .about-contact {
  color: var(--black);
}
body.lighting-mode-dark .about-action-filled {
  background-color: #1B1819;
  color: var(--black);
}
body.lighting-mode-dark .about-action-filled:hover {
  background-color: var(--beige100);
  box-shadow: none;
}
body.lighting-mode-dark .about-action-outline {
  color: var(--black);
}
body.lighting-mode-dark .about-action-outline .about-action-dash rect {
  stroke: var(--black);
}
body.lighting-mode-dark .about-action-outline:hover {
  background-color: rgba(176, 174, 166, 0.08);
}
body.lighting-mode-dark .page-project .grid .grid-row:not(.row-carousel) .element-1:not(.is-visible.is-loaded),
body.lighting-mode-dark .page-project .grid .grid-row.row-2 .element-2:not(.is-visible.is-loaded) {
  background-color: #2B2829;
}
body.lighting-mode-dark .page-project .info .details .tags .tag {
  color: #8F8C86;
}
body.lighting-mode-dark .controller .controller-inner .buttons .knob.lighting .knob-inner:before {
  transform: rotate(0deg);
}
body.lighting-mode-dark .controller .controller-inner .text .title .actions .action {
  background-color: #1B1819;
  color: var(--black);
}
body.lighting-mode-dark .controller .controller-inner .text .title .actions .action:hover {
  background-color: var(--beige100);
}
body.lighting-mode-dark .controller .controller-inner .text .title .details {
  color: #545454;
}
body.lighting-mode-dark .controller .controller-inner .buttons .knob .knob-inner {
  background-color: #3D3D3D;
}
body.lighting-mode-dark .controller .controller-inner .buttons .knob .knob-inner:before {
  background: linear-gradient(to right, transparent 0%, transparent 50%, var(--black) 50%, var(--black) calc(100% - 8px), transparent calc(100% - 8px));
}
body.lighting-mode-dark .controller .controller-inner .buttons .knob.grid .knob-inner {
  color: var(--black);
}
body.lighting-mode-dark .controller .controller-inner .buttons .sound-wave {
  background-color: #232122;
}
body.lighting-mode-dark .controller .controller-inner .buttons .enter:hover {
  --enterFill: #191617;
}
body.lighting-mode-dark .controller .controller-inner .buttons .enter:hover .enter-inner {
  --enterFill: #191617;
}
body.lighting-mode-dark .controller .controller-inner .project-list.slider {
  background: linear-gradient(var(--pureWhite), var(--pureWhite)) padding-box, radial-gradient(100% 211.26% at 100% 93.92%, rgba(243, 243, 243, 0.1) 0%, rgba(200, 196, 191, 0.1) 50%, rgba(243, 243, 243, 0.1) 100%) border-box;
}
body.lighting-mode-dark .controller .controller-inner .project-list.slider .project-list-inner.slider-wrapper {
  background-image: url("../assets/slider-background-dark.svg");
}