:root {
  /* palettes */
  --light-bg-color: #faf2e7;
  --light-text-color: #050d17;
  --light-link-color: #9e5c00;
  --light-border-color: #9e5c00;
  --light-card-bg-color: rgba(255,255,255,0.5);

  --dark-bg-color: #050d17;
  --dark-text-color: #faf2e7;
  --dark-link-color: #24a6ff;
  --dark-border-color: #004163;
  --dark-card-bg-color: rgba(255,255,255,0.1);


  /* theme */
  --bg-color: var(--light-bg-color);
  --text-color: var(--light-text-color);
  --link-color: var(--light-link-color);
  --border-color: var(--light-border-color);
  --card-bg-color: var(--light-card-bg-color);

  /* fonts */
  --body-font: Commissioner, serif;
  --heading-font: 'DM Serif Display', sans-serif;
  --accent-font: 'Courier New', monospace;


  /* spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-4: 2rem;

  --neg-space-1: calc(0rem - var(--space-1));
  --neg-space-2: calc(0rem - var(--space-2));
  --neg-space-4: calc(0rem - var(--space-4));


  /* breakpoints */
  --bp-small: 360px;
  --bp-large: 1280px;
}

/* change spacings for larger screens */
@media screen and (min-width: 499px) {
  :root {
    --space-1: 1rem;
    --space-2: 2rem;
    --space-4: 4rem;
  }
}


/* /// RESETS AND GLOBAL STYLES /// */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body, p, ul, ol, li, h1, h2, h3, h4, h5, h6, figure {
  margin: 0;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 1s;
}
html::view-transition-old(*),
html::view-transition-new(*) {
  block-size: 100%;
}

html {
  background-color: black;
  padding: 12px;
  /* base sizes on user preference or 20px or so */
  font-size: clamp(1em, 20px, 1.25em);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

body {
  font-family: var(--body-font);
  font-weight: 200;
  font-size: 0.85rem;
  background: var(--bg-color) url(bg-texture.webp);
  background-position: center top;
  color: var(--text-color);
  border: 6px double var(--border-color);
  border-radius: 40px;
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 361px) {
  body {
    font-size: 1em;
  }
}

a, a:visited {
  color: var(--link-color);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--text-color);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--link-color);
  border-radius: 4px;
  box-shadow: 0 0 4px var(--border-color);
}

hr {
  border: 0;
  border-block-end: 6px double var(--border-color);
  margin-block: var(--space-2);
}

details {
  line-height: 1.6;
}
summary {
  font-weight: 700;
  cursor: pointer;
  margin-block-end: 0.5em;
}
summary:hover {
  color: var(--link-color);
}

figure {
  margin-block-start: 0.5em;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--card-bg-color);
}
figcaption {
  font-size: 0.8rem;
  padding: var(--space-1);
}
figure + figure {
  margin-top: 1em;
}

/* /// TYPOGRAPHY /// */

h1, h2, h3 {
  font-size: 1.2rem;
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.2;
  margin-block-end: 0.5em;
  text-wrap: balance;
}
@media screen and (min-width: 500px) {
  h1, h2, h3 {
    /* fluid type technique */
    font-size: calc(1.5rem + (2rem - 1.5rem) * ((100vw - var(--bp-small)) / (var(--bp-large) - var(--bp-small))));
  }
}

h4 {
  font-size: 1em;
  margin-block-end: 0.5em;
}

.content-header h1 {
  font-size: 1.5rem;
  margin-block-end: 0.25em;
}
@media screen and (min-width: 500px) {
  .content-header h1 {
    font-size: calc(1.5rem + (2.5rem - 1.5rem) * ((100vw - var(--bp-small)) / (var(--bp-large) - var(--bp-small))));
  }
}

ul {
  margin-inline-start: 1em;
  margin-block-end: 1em;
  padding: 0;
}
ul:not(:first-child) {
  margin-block-start: 1em;
}
p, ul {
  line-height: 1.6;
  text-wrap: pretty;
}
p + p,
p + h2,
p + h3,
p + h4,
img + p {
  margin-block-start: 1em;
}

strong {
  font-weight: 700;
}

sup {
  line-height: 1;
}
sup a {
  text-decoration: none;
  font-weight: 500;
}

.meta,
.accent-text {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--accent-font);
  font-size: 0.8em;
}
.meta + h3 {
  margin-block-start: 0;
}


/* /// UTILITY /// */

.hide-on-small {
  display: none;
}
@media (min-width: 499px) {
  .hide-on-small {
    display: unset;
  }
}

.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}


/* /// GLOBAL UI and HOMEPAGE /// */

.site-header {
  inset-block-start: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-2);
  transition: padding 0.5s ease-in-out;
  border-radius: 40px 40px 0 0;
  border-block-end: 2px solid var(--border-color);
}
.site-header nav a,
.cta-link {
  display: inline-block;
  padding-inline: 4px;
  margin-inline: -4px;
  border-radius: 2px;
}
.site-header nav a:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
  text-decoration: none;
}

.site-footer {
  padding: var(--space-2);
  border-radius: 0 0 var(--space-2) var(--space-2);
}

.logo {
  inline-size: 40px;
  transition: width 0.5s ease-in-out;
}
@media (min-width: 499px) {
  .logo {
    inline-size: 60px;
  }
}
.toggle {
  all: unset;
  box-sizing: content-box;
  cursor: pointer;
  inline-size: 20px;
  block-size: 20px;
  padding: 8px;
  transition: 0.5s ease-in-out;
  transition-property: width, margin;
}
@media (min-width: 499px) {
  .toggle {
    inline-size: 28px;
    block-size: 28px;
    padding-inline: 16px;
    padding-block: 0;
  }
}

.dark-mode .toggle-dark,
html:not(.dark-mode) .toggle-light {
  display: none;
}
.dark-mode .toggle-light,
html:not(.dark-mode) .toggle-dark {
  display: block;
}

.site-title,
.site-header nav,
.copyright {
  flex: 1;
  font-size: 1em;
  line-height: 1.2em;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--accent-font);
}
.site-header .site-title {
  display: inline;
}
.site-section-title,
.copyright {
  text-align: center;
}
.site-section-title {
  scroll-margin-block-start: var(--space-1);
  margin-block: var(--space-2);
}
.site-section-title:after {
  content: '';
  display: block;
  border-block-end: 6px double var(--border-color);
  margin-block-start: -0.8em;
}
.site-section-title span {
  background: var(--bg-color) url(bg-texture.webp);
  padding-inline: 8px;
}
.project-carousel-nav {
  display: inline-block;
}

.content {
  border-block-end: 2px solid var(--border-color);
  overflow: hidden;
}

.row {
  max-inline-size: 1200px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  inline-size: 100%;
  gap: var(--space-1);
  padding: var(--space-2);
  align-items: center;
}

.text {
  flex: 1;
  min-inline-size: 260px;
}

.intro {
  max-inline-size: 900px;
  margin-inline: auto;
  gap: var(--space-2);
  background: url(menu-bg.webp) no-repeat;
}
@media screen and (min-width: 728px) {
  .intro .text p {
    padding-inline-end: var(--space-2);
  }
}

.big-link {
  display: block;
  text-decoration: none;
  max-inline-size: 1200px;
  margin-inline: auto;
}
.big-link p {
  color: var(--text-color);
}
h3 a,
.big-link h3 {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.1rem;
}
h3 a:hover,
.big-link:hover h3 {
  background: none;
  color: var(--text-color);
}

@media screen and (min-width: 728px) {
  .big-link:nth-of-type(2n) .anim-scene {
    order: 2;
  }
}

.about {
  display: block;
}

.two-cols {
  margin-block-end: var(--space-2);
}
@media screen and (min-width: 728px) {
  .two-cols {
    columns: 2;
    column-gap: var(--space-2);
    column-rule: 2px solid var(--border-color);
  }
}

.sticker {
  transition: transform 0.5s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .sticker:hover {
    transform: scale(1.1);
  }
}

.cta-link,
.cta-link:visited {
  padding-inline: 16px;
  padding-block: 4px;
  border-radius: 24px;
  text-decoration: none;
  background-color: var(--text-color);
  color: var(--bg-color);
  position: relative;
}
.cta-link:hover,
.cta-link:visited:hover {
  color: var(--bg-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.cta-link:active {
  inset-block-start: 2px;
}


/* /// HOMEPAGE - ALL SCENES /// */

.anim-scene {
  position: relative;
  inline-size: 60%;
  aspect-ratio: 400 / 344;
  margin-inline: auto;
  margin-block-end: var(--space-2);
}
.anim-scene * {
  /* logical properties don't work with transforms yet. more work would be needed to support real i18n */
  transform-origin: bottom right;
  transition: 0.5s ease-in-out;
}
@media screen and (min-width: 728px) {
  .anim-scene {
    inline-size: 33%;
    min-inline-size: 216px;
    margin-inline: 8.5%;
    margin-block: 0;
  }
}


/* /// HOMEPAGE - PORTRAIT /// */

.anim-scene-portrait {
  margin-block-end: var(--neg-space-1);
  aspect-ratio: 226 / 314;
  max-inline-size: 260px;
}
@media screen and (min-width: 728px) {
  .anim-scene-portrait {
    margin-inline: 0 8.5%;
  }
}

.anim-content-img-face {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 100%;

  transform-origin: center;
}
.anim-img-coffee {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -10%;
  inline-size: 44%;
  opacity: 0;
  transition-property: transform, opacity;
}
.anim-img-pencil {
  position: absolute;
  inset-block-start: 10%;
  inset-inline-end: -30%;
  inline-size: 40%;
  opacity: 0;
  transition-property: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  .anim-scene:hover .anim-content-img-face {
    transform: scale(1.1);
  }
  .anim-scene:hover .anim-img-coffee {
    opacity: 1;
    transform: scale(1.1) translateX(-26%) translateY(-20%) rotate(-7deg);
  }
  .anim-scene:hover .anim-img-pencil {
    opacity: 1;
    transform: scale(1.1) translateX(6%) translateY(16%) rotate(-14deg);
  }
}


/* /// HOMEPAGE - ALL COMPUTER SCENES /// */

.anim-computer-frame {
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform-origin: bottom center;
  z-index: 2;
}
.anim-img-computer {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  z-index: 10;
}
.anim-content-img-screen {
  position: absolute;
  inset-block-end: 22%;
  inset-inline-start: 11%;
  inline-size: 78%;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .big-link:hover .anim-computer-frame {
    transform: scale(1.1);
  }
}


/* /// HOMEPAGE - AI /// */

.anim-img-cloud {
  position: absolute;
  inset-block-end: -15%;
  inset-inline-end: -30%;
  inline-size: 90%;
  transform-origin: bottom left;
  z-index: 10;
}

.anim-phone-frame {
  position: absolute;
  inset-block-start: 10%;
  inset-inline-start: -10%;
  inline-size: 40%;
  block-size: 90.7%;
  transform: rotate(-18deg);
  z-index: 3;
}
.anim-img-phone {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  z-index: 10;
}
.anim-content-img-mobile {
  position: absolute;
  inset-block-start: 5%;
  inset-inline-start: 23%;
  inline-size: 56.5%;
  border-radius: 8%;
  transform-origin: center;
  transform: rotate(-19deg);
  z-index: 1;
}

.anim-img-robot {
  position: absolute;
  inset-block-start: 20%;
  inset-inline-end: -15%;
  inline-size: 35%;
  transform: rotate(3deg);
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .big-link:hover .anim-img-cloud {
    transform: scale(1.1) translateX(8%);
  }
  .big-link:hover .anim-phone-frame {
    transform: scale(1.1) translateX(-28%) translateY(-8%) rotate(-8deg);
  }
  .big-link:hover .anim-img-robot {
    transform: scale(1.1) translateX(37%) translateY(17%) rotate(7deg);
  }
}


/* /// HOMEPAGE - HBG /// */

.anim-img-cloud2 {
  position: absolute;
  inset-block-end: -15%;
  inset-inline-start: -40%;
  inline-size: 90%;
  transform-origin: bottom left;
  z-index: 10;
}

.anim-phone-frame2 {
  position: absolute;
  inset-block-start: 30%;
  inset-inline-end: -16%;
  inline-size: 40%;
  block-size: 90.7%;
  transform: rotate(3deg);
  transform-origin: bottom left;
  z-index: 3;
}
.anim-img-phone2 {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 100%;
  z-index: 10;
}
.anim-content-img-mobile2 {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-end: 23%;
  inline-size: 56.5%;
  transform-origin: center;
  transform: rotate(19deg);
  z-index: 1;
  border-radius: 8%;
}

.anim-img-flow {
  position: absolute;
  inset-block-start: 15%;
  inset-inline-start: -24%;
  inline-size: 40%;
  transform: rotate(-17deg);
}

@media (prefers-reduced-motion: no-preference) {
  .big-link:hover .anim-img-cloud2 {
    transform: scale(1.1) translateX(-15%);
  }
  .big-link:hover .anim-phone-frame2 {
    transform: scale(1.1) translateX(18%) translateY(-8%) rotate(8deg);
  }
  .big-link:hover .anim-img-flow {
    transform: scale(1.2) translateX(10%) translateY(-5%) rotate(-6deg);
  }
}


/* /// HOMEPAGE - DESIGN SYSTEMS /// */

.anim-img-star {
  position: absolute;
  inset-block-start: -10%;
  inset-inline-start: -16%;
  inline-size: 55%;
  transform: rotate(-27deg);
}
.anim-img-component {
  position: absolute;
  inset-block-start: 3%;
  inset-inline-end: -10%;
  inline-size: 50%;
  transform: rotate(3deg);
  z-index: 5;
}
.anim-img-planet {
  position: absolute;
  inset-block-end: -10%;
  inset-inline-end: -24%;
  inline-size: 60%;
  transform-origin: bottom left;
  z-index: 10;
}

@media (prefers-reduced-motion: no-preference) {
  .big-link:hover .anim-img-star {
    transform: scale(1.2) translateX(-10%) translateY(-5%) rotate(-16deg);
  }
  .big-link:hover .anim-img-component {
    transform: scale(1.1) translateX(20%) translateY(-12%) rotate(17deg);
  }
  .big-link:hover .anim-img-planet {
    transform: scale(1.1) translateX(5%) translateY(20%) rotate(7deg);
  }
}


/* /// PORTFOLIO PIECE PAGES /// */

.content-header {
  text-align: center;
  padding: var(--space-2);
}

.portfolio-hero-image {
  padding-inline: var(--space-1);
}
.portfolio-hero-image + p {
  margin-block-start: var(--space-2);
}

.portfolio-hero-image img {
  max-block-size: 90vh;
  margin-inline: auto;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow:
    0 0 16px rgba(0,0,0,0.08),
    0 4px 32px rgba(0,0,0,0.06),
    0 36px 36px -30px rgba(0,0,0,0.16);
}
@media screen and (min-width: 500px) {
  .portfolio-hero-image img {
    border-radius: 16px;
  }
}

.subpage-content {
  background: url(splash-bg.webp) no-repeat;
  background-position: 90% 0;
}
.subpage1 {
  background-position: 0 100px;
}
.subpage2 {
  background-position: 85% -100px;
}


/* /// PORTFOLIO PIECE - LAYOUT /// */

.page-section {
  padding-block: var(--space-2);
}
.page-section + .page-section {
  border-block-start: 6px double var(--border-color);
}
.page-section + .site-section-title {
  margin: 0;
}
.page-section-group {
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.page-section-group + .page-section-group {
  padding-block-start: 0;
}
.valign {
  align-items: center;
}
.page-section-title {
  inline-size: 100%;
  margin-block-start: var(--space-1);
  /* offset gap of rows */
  margin-block-end: var(--neg-space-1);
}
.page-section-group:first-child .page-section-title {
  /* offset gap of rows */
  margin-block-start: var(--neg-space-1);
}
.wider-side {
  flex: 3;
  min-inline-size: 260px;
}
.wider-side-fill {
  inline-size: 100%;
}
.narrow-side {
  flex: 2;
  min-inline-size: 260px;
}
.flex {
  flex: 1;
  min-inline-size: 260px;
}
.header-aligned .page-section-group {
  gap: 0;
}
@media screen and (min-width: 691px) {
  .narrow-side {
    max-inline-size: 40%;
  }
  .wider-side {
    max-inline-size: 60%;
  }
  .wider-side-fill {
    padding-inline-end: 40%;
  }
  .header-aligned .page-section-group {
    gap: var(--space-2);
  }
  .header-aligned .narrow-side h2 {
    text-align: end;
  }
  .header-aligned .wider-side *:first-child {
    margin-block-start: 0.7em;
  }
}

/* /// PORTFOLIO PIECE - IMAGES and COMPONENTS /// */

.page-section img {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  margin-block-start: 0.5em;
}
.page-section figure img,
.page-section .illu {
  border: 0;
  border-radius: 0;
  margin-block-start: 0;
}

.scrollable-img {
  overflow: auto;
}

.stats {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--space-1);
  inline-size: inherit;
  margin: var(--space-2);
}
.stat {
  min-inline-size: 120px;
  text-align: center;
  flex: 1;
  font-size: 0.8em;
}
.stat-number {
  font-family: var(--heading-font);
  display: block;
  font-size: 3em;
  line-height: 1;
}
.stat-number span {
  font-size: 0.6em;
  vertical-align: middle;
  inline-size: 1em;
}
.stat-number .first {
  margin-inline-start: -1em;
}
.stat-number .last {
  margin-inline-end: -1em;
}

.page-menu {
  padding: var(--space-2);
  margin: var(--neg-space-2);
  background: url(menu-bg.webp) no-repeat center;
  background-size: contain;
}
.page-menu ul {
  list-style-type: none;
  margin-block-start: 1em;
  padding-inline-start: 1em;
}
@media screen and (min-width: 691px) {
  .page-menu ul {
    columns: 2;
    column-gap: var(--space-2);
  }
}
.page-menu li {
  margin-block-end: 1em;
}
.page-menu li:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  inline-size: 4px;
  block-size: 4px;
  margin-inline-start: -12px;
  margin-inline-end: 8px;
  margin-block: 0;
  border-radius: 50%;
  background-color: var(--border-color);
}

.more {
  font-size: 0.8rem;
}
details .more {
  margin-inline-start: 1.05em;
}
.more-sol {
  border-inline-start: 1px solid;
  padding-inline-start: 1em;
  margin-block-end: 1em;
}

.callout-box {
  border: 2px solid var(--border-color);
  border-radius: 16px;
  block-size: stretch;
  padding: var(--space-2);
  margin-block-start: 0.5em;
  overflow: hidden;
}

.quo {
  display: inline-block;
  inline-size: 0.5em;
  margin-inline-start: -0.5em;
  font-size: 2em;
  font-family: var(--heading-font);
  line-height: 0;
  vertical-align: middle;
  color: var(--link-color);
}
.by {
  font-size: 0.8em;
  margin-top: 0;
}


/* /// PORTFOLIO PIECE - UNIQUE ELEMENTS /// */

.img-ds-sketch {
  float: right;
  margin-inline-end: var(--neg-space-2);
  margin-block-end: var(--neg-space-2);
  inline-size: 400px;
}

.chbg-app-screens {
  inline-size: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
}
.chbg-app-screens > * {
  inline-size: 16%;
  min-inline-size: 120px;
  position: relative;
}
.chbg-app-screens > *::after,
.chbg-app-screens > *::before {
  content: '';
  display: block;
  border-block-end: 2px solid var(--border-color);
  position: absolute;
  inline-size: var(--space-2);
  inset-block-start: 50%;
}
.chbg-app-screens > *::after {
  inset-inline-end: var(--neg-space-2);
}
.chbg-app-screens > *::before {
  inset-inline-start: var(--neg-space-2);
}
.chbg-app-screens > *:last-child::after {
  mask-image: linear-gradient(90deg, black 0, transparent 75%);
}
.chbg-app-screens > *:first-child::before {
  content: '';
  display: block;
  border-inline-start: 2px solid var(--border-color);
  position: absolute;
  inline-size: var(--space-2);
  block-size: 50%;
  inset-inline-start: var(--neg-space-2);
  inset-block-start: 0;
  mask-image: linear-gradient(transparent 0, black 25%);
}
.chbg-app-screens p {
  padding: var(--space-1);
  font-size: 0.8em;
  text-align: center;
}

.chbg-steps {
  box-shadow:
    -8px 8px 0 rgba(0,0,0,0.1),
    -16px 16px 0 rgba(0,0,0,0.1);
}

.ai-message-prototype {
  position: relative;
  aspect-ratio: 1440/900;
  display: inline-block;
  margin-inline: auto;
}
.ai-message-prototype-bg {
  max-block-size: 90vh;
}
img.ai-message-prototype-fg {
  position: absolute;
  inline-size: 27.3%;
  inset-block-start: 6.6%;
  inset-inline-start: 53.35%;
  border: 0;
  border-radius: 0 0 5% 5%;
}


/* /// DARK MODE - GLOBAL /// */
/* could've used CSS prefers-color-scheme and light-dark()
   but wanted a toggle to easily switch for demo purposes */


.dark-mode,
.dark-mode * {
  /* sets default browser UI */
  color-scheme: dark;
}

.dark-mode {
  --bg-color: var(--dark-bg-color);
  --text-color: var(--dark-text-color);
  --link-color: var(--dark-link-color);
  --border-color: var(--dark-border-color);
  --card-bg-color: var(--dark-card-bg-color);
}

.dark-mode body,
.dark-mode .site-header,
.dark-mode .site-section-title span {
  background-image: url(bg-texture-dark.webp);
}
.dark-mode .home img:not(.colorstay-img),
.dark-mode .logo,
.dark-mode .toggle,
.dark-mode .invertable {
  /* dark mode 'oil slick' illustrations */
  filter: invert();
}

.dark-mode .intro {
  background: url(menu-bg-dark.webp) no-repeat;
}

.dark-mode .page-menu {
  background-image: url(menu-bg-dark.webp);
}

.dark-mode .subpage-content {
  background-image: url(splash-bg-dark.webp);
}

.dark-mode .chbg-app-screens > *::after,
.dark-mode .chbg-app-screens > *::before {
  border-color: var(--link-color);
}
.dark-mode .chbg-steps {
  box-shadow:
    -8px 8px 0 rgba(255,255,255,0.2),
    -16px 16px 0 rgba(255,255,255,0.2);
}