:root {
      --sandy-brown: #f19955;
      --bright-lavender: #a994db;
      --onyx: #0c0c0c;
      --emerald: #69dc9e;
      --white: #fff;
      --line: 4px;
      --page-width: 1440px;
    }

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

    html {
      background: var(--white);
      color: var(--onyx);
      font-family: "Work Sans", sans-serif;
      scroll-behavior: smooth;
    }

    body {
      min-width: 320px;
      margin: 0;
      background: var(--white);
    }

    body.modal-open {
      overflow: hidden;
    }

    button,
    input {
      font: inherit;
    }

    a {
      color: inherit;
    }

    :focus-visible {
      outline: 4px solid var(--white);
      outline-offset: 3px;
      box-shadow: 0 0 0 7px var(--onyx);
    }

    .site-header {
      min-height: 160px;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2;
      background: var(--white);
    }

    .header-inner {
      width: min(100%, var(--page-width));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-inline: auto;
      padding-inline: clamp(20px, 4vw, 56px);
    }

    .site-title {
      margin: 0;
      font-size: 5rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.08em;
      transform: translateY(38px);
    }

    .site-logo {
      display: block;
      width: clamp(112px, 12vw, 168px);
      height: auto;
      position: relative;
      z-index: 1;
      transform: translateY(32px);
    }

    .site-shell {
      width: min(100%, var(--page-width));
      margin-inline: auto;
      padding: 0 clamp(20px, 4vw, 56px) clamp(20px, 4vw, 56px);
      background: var(--white);
    }

    .mondrian {
      display: flex;
      flex-direction: column;
      gap: 36px;
      margin-bottom: 36px;
    }

    .mondrian-section {
      display: flex;
      flex-direction: column;
      background: var(--onyx);
      border: var(--line) solid var(--onyx);
      gap: var(--line);
    }

    .mondrian-row {
      min-height: 310px;
      display: grid;
      gap: var(--line);
    }

    /* Every content cell owns at least 25% of its row, while each row sets its own rhythm. */
    .mondrian-row--one {
      grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.38fr) minmax(0, 1.6fr);
    }

    .mondrian-row--two {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 2.4fr) minmax(0, 1fr);
    }

    .mondrian-row--three {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.24fr) minmax(0, 1.68fr);
    }

    .mondrian-row--four {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mondrian-filler {
      min-width: 0;
      background: var(--onyx);
    }

    .cell {
      --cell-bg: var(--white);
      --cell-fg: var(--onyx);
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: clamp(24px, 3vw, 48px);
      color: var(--cell-fg);
      background: var(--cell-bg);
    }

    .cell[data-color="sandy"] {
      --cell-bg: var(--sandy-brown);
    }

    .cell[data-color="lavender"] {
      --cell-bg: var(--bright-lavender);
    }

    .cell[data-color="emerald"] {
      --cell-bg: var(--emerald);
    }

    .cell[data-color="white"] {
      --cell-bg: var(--white);
    }

    .cell--section {
      --cell-bg: var(--onyx);
      --cell-fg: var(--white);
      position: relative;
      justify-content: center;
      overflow: hidden;
    }

    .section-title {
      max-width: none;
      margin: 0;
      font-size: clamp(2.2rem, 3.8vw, 4.2rem);
      font-weight: 700;
      letter-spacing: -.06em;
      line-height: .88;
      overflow-wrap: normal;
    }

    .cell--app {
      justify-content: space-between;
      gap: 36px;
    }

    .cell--app.clear,
    .cell--app.scores,
    .cell--app.bird,
    .cell--app.diy,
    .cell--app.pix,
    .cell--app.not,
    .cell--app.chain,
    .cell--app.snow {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .cell--app.clear::after,
    .cell--app.scores::after,
    .cell--app.bird::after,
    .cell--app.diy::after,
    .cell--app.pix::after,
    .cell--app.not::after,
    .cell--app.chain::after,
    .cell--app.snow::after {
      content: "";
      position: absolute;
      right: 18px;
      bottom: -20px;
      width: 128px;
      height: 128px;
      z-index: 0;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      pointer-events: none;
    }

    .cell--app.clear::after {
      background-image: url("./assets/icons/knight.png");
    }

    .cell--app.scores::after {
      background-image: url("./assets/icons/scores.png");
    }

    .cell--app.bird::after {
      background-image: url("./assets/icons/birdfood.png");
    }

    .cell--app.diy::after {
      background-image: url("./assets/icons/diywordle.png");
    }

    .cell--app.pix::after {
      background-image: url("./assets/icons/pixemoji.png");
    }

    .cell--app.not::after {
      background-image: url("./assets/icons/notawordle.png");
    }

    .cell--app.chain::after {
      background-image: url("./assets/icons/radiant.png");
    }

    .cell--app.snow::after {
      background-image: url("./assets/icons/snowman.png");
    }

    .cell--app.clear > *,
    .cell--app.scores > *,
    .cell--app.bird > *,
    .cell--app.diy > *,
    .cell--app.pix > *,
    .cell--app.not > *,
    .cell--app.chain > *,
    .cell--app.snow > * {
      position: relative;
      z-index: 1;
    }

    .app-copy {
      display: grid;
      align-content: start;
      gap: 20px;
    }

    .app-icon {
      width: 64px;
      height: 64px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
      flex: 0 0 auto;
      padding: 9px;
      border: 3px solid currentColor;
      transform: rotate(-2deg);
    }

    .app-icon span {
      display: block;
      border: 2px solid currentColor;
    }

    .app-icon span:nth-child(2),
    .app-icon span:nth-child(3) {
      background: currentColor;
    }

    .app-title {
      max-width: 100%;
      margin: 0;
      font-size: clamp(1.65rem, 2.6vw, 3.2rem);
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: .98;
      overflow-wrap: anywhere;
    }

    .app-description {
      max-width: 38ch;
      margin: 0;
      font-size: clamp(1rem, 1.25vw, 1.2rem);
      line-height: 1.5;
    }

    .button,
    .subscribe-button,
    .modal-close {
      font-family: "JetBrains Mono", monospace;
      font-weight: 600;
    }

    .button {
      width: fit-content;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 13px 18px;
      color: var(--white);
      background: var(--onyx);
      border: 3px solid var(--onyx);
      box-shadow: 5px 5px 0 color-mix(in srgb, var(--cell-fg), transparent 58%);
      text-decoration: none;
      transition: transform 140ms ease, box-shadow 140ms ease;
    }

    .button:hover,
    .button:active {
      transform: translate(4px, 4px);
      box-shadow: 1px 1px 0 color-mix(in srgb, var(--cell-fg), transparent 58%);
    }

    .site-footer {
      min-height: 118px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 28px clamp(24px, 4vw, 56px);
      color: var(--white);
      background: var(--onyx);
    }

    .site-footer p {
      margin: 0;
      font-size: 1rem;
    }

    .site-footer a {
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .site-footer a:hover {
      text-decoration-color: var(--emerald);
    }

    .subscribe-button,
    .modal-submit {
      padding: 14px 20px;
      color: var(--onyx);
      background: var(--emerald);
      border: 3px solid var(--white);
      cursor: pointer;
    }

    .subscribe-button {
      box-shadow: 5px 5px 0 var(--bright-lavender);
      transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
    }

    .subscribe-button:hover,
    .subscribe-button:active {
      transform: translate(4px, 4px);
      box-shadow: 1px 1px 0 var(--bright-lavender);
    }

    .subscribe-button:hover,
    .modal-submit:hover {
      background: var(--bright-lavender);
    }

    .newsletter-dialog {
      width: min(680px, calc(100% - 32px));
      max-height: calc(100dvh - 32px);
      margin: auto;
      padding: 0;
      color: var(--onyx);
      background: var(--bright-lavender);
      border: var(--line) solid var(--onyx);
      box-shadow: 12px 12px 0 var(--onyx);
      overflow: visible;
    }

    .newsletter-dialog::backdrop {
      background: rgb(12 12 12 / .72);
      backdrop-filter: blur(12px);
    }

    .newsletter-dialog.is-opening {
      animation: modal-in 220ms cubic-bezier(.2, .8, .2, 1) both;
    }

    .newsletter-dialog.is-opening::backdrop {
      animation: backdrop-in 220ms ease-out both;
    }

    .newsletter-dialog.is-closing {
      animation: modal-out 170ms ease-in both;
    }

    .newsletter-dialog.is-closing::backdrop {
      animation: backdrop-out 170ms ease-in both;
    }

    @keyframes modal-in {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes modal-out {
      from {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      to {
        opacity: 0;
        transform: translateY(10px) scale(.99);
      }
    }

    @keyframes backdrop-in {
      from {
        background: rgb(12 12 12 / 0);
        backdrop-filter: blur(0);
      }
      to {
        background: rgb(12 12 12 / .72);
        backdrop-filter: blur(12px);
      }
    }

    @keyframes backdrop-out {
      from {
        background: rgb(12 12 12 / .72);
        backdrop-filter: blur(12px);
      }
      to {
        background: rgb(12 12 12 / 0);
        backdrop-filter: blur(0);
      }
    }

    .modal-inner {
      position: relative;
      display: grid;
      gap: 30px;
      padding: clamp(28px, 6vw, 64px);
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      padding: 0;
      color: var(--white);
      background: var(--onyx);
      border: 2px solid var(--onyx);
      cursor: pointer;
      font-size: 1.45rem;
      line-height: 1;
    }

    .modal-form-state {
      display: grid;
      gap: clamp(24px, 4vw, 34px);
    }

    .modal-form-state[hidden] {
      display: none;
    }

    .modal-title {
      max-width: 11ch;
      margin: 0;
      font-size: clamp(2.4rem, 7vw, 5rem);
      font-weight: 700;
      letter-spacing: -.06em;
      line-height: .9;
    }

    .modal-copy {
      max-width: 48ch;
      margin: 0;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      line-height: 1.55;
    }

    .newsletter-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0;
    }

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

    .email-input {
      min-width: 0;
      padding: 17px 18px;
      color: var(--onyx);
      background: var(--white);
      border: 3px solid var(--onyx);
      border-right: 0;
      border-radius: 0;
      font-size: 1rem;
    }

    .email-input::placeholder {
      color: rgb(12 12 12 / .58);
      font-family: "JetBrains Mono", monospace;
      opacity: 1;
    }

    .modal-submit {
      border-color: var(--onyx);
      font-family: "JetBrains Mono", monospace;
      font-weight: 600;
    }

    .modal-submit:disabled {
      cursor: wait;
      opacity: .65;
    }

    .modal-form-message {
      grid-column: 1 / -1;
      min-height: 1.5em;
      margin: 12px 0 0;
      font-size: .95rem;
      font-weight: 600;
      line-height: 1.5;
    }

    .modal-form-message:empty {
      display: none;
    }

    .modal-success {
      display: none;
      min-height: 340px;
      align-content: center;
      gap: 28px;
    }

    .modal-success[aria-hidden="false"] {
      display: grid;
    }

    .modal-success-mark {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      color: var(--white);
      background: var(--onyx);
      font-size: 2rem;
      font-weight: 700;
    }

    @media (max-width: 900px) {
      .mondrian-row {
        min-height: 245px;
      }

      .mondrian-row--one {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .mondrian-row--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .mondrian-row--three {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr);
      }

      .mondrian-row--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .mondrian-filler {
        display: none;
      }

      .section-title {
        font-size: clamp(2.1rem, 7vw, 4.4rem);
      }
    }

    @media (max-width: 600px) {
      :root {
        --line: 3px;
      }

      .site-header {
        min-height: 120px;
      }

      .header-inner {
        gap: 16px;
        padding-inline: 20px;
      }

      .site-title {
        font-size: clamp(2.5rem, 12vw, 4.5rem);
      }

      .site-logo {
        width: 92px;
        transform: translateY(26px);
      }

      .site-shell {
        padding: 0 14px 14px;
      }

      .mondrian {
        display: flex;
        flex-direction: column;
        gap: 36px;
      }

      .mondrian-section {
        display: flex;
        flex-direction: column;
        gap: var(--line);
      }

      .mondrian-row {
        display: contents;
      }

      .cell {
        min-height: 270px;
        padding: 28px 24px;
      }

      .cell--section {
        min-height: 170px;
      }

      .section-title {
        max-width: none;
        font-size: clamp(2.8rem, 14vw, 4.2rem);
        overflow-wrap: normal;
      }

      .app-title {
        font-size: 2rem;
      }

      .site-footer {
        min-height: 150px;
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 24px;
      }

      .newsletter-dialog {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 24px);
        box-shadow: 7px 7px 0 var(--onyx);
      }

      .modal-inner {
        gap: 22px;
        padding: 64px 24px 28px;
      }

      .newsletter-form {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .email-input {
        border-right: 3px solid var(--onyx);
      }

      .modal-submit {
        min-height: 56px;
      }
    }

    @media (max-width: 399px) {
      .site-title {
        font-size: clamp(2rem, 10vw, 2.5rem);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }