@layer reset, base, layout, components, effects, animations, overrides;



@layer reset {
  * {
    box-sizing: border-box;
    margin: 0;
  }
}
@layer base {

  /* Bron: MDN Web Docs – @property (https://developer.mozilla.org/en-US/docs/Web/CSS/@property) */
  @property --slider-een {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --slider-twee {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --slider-drie {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --slider-vier {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --needle-spin {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }

  :root {
    --layout-max: 1120px;
    --radius-panel: 8px;
    --slider-vier-kritiek: clamp(0, calc(var(--slider-vier, 0) - 99), 1);
    --color-bg: rgb(17 17 17);
    --color-text: rgb(231 238 246);
    --color-danger: rgb(210 8 4);
    --color-danger-soft: rgb(210 8 4 / 0.1);
    --color-panel: rgb(144 152 164);
    --color-frame: rgb(34 34 34);
    --color-screen-glow: rgb(45 247 18 / 0.1);
    --color-button: rgb(219 223 229);
    --color-button-danger: rgb(215 39 35);
    --color-button-danger-shadow: rgb(186 7 4);
    --color-button-glow: rgb(202 202 202);
    --color-track: rgb(38 38 38);
    --color-slider-red: rgb(169 45 43);
    --color-slider-green: rgb(53 143 48);
    --color-slider-blue: rgb(48 79 185);
    --color-knob-dark: rgb(37 36 41);
    --color-knob-mid: rgb(56 56 54);
    --color-bg-retro: #ffff99;
    --color-text-retro: #000000;
    --color-primary-retro: #ff1493;
    --color-secondary-retro: #00ffff;
    --color-border-retro: #ff1493;
    --color-button-retro: #ffff00;
    --color-black: rgb(0 0 0);
    --color-black-20: rgb(0 0 0 / 0.2);
    --color-black-30: rgb(0 0 0 / 0.3);
    --color-black-35: rgb(0 0 0 / 0.35);
    --color-black-40: rgb(0 0 0 / 0.4);
    --color-black-50: rgb(0 0 0 / 0.5);
    --color-black-60: rgb(0 0 0 / 0.6);
    --color-black-70: rgb(0 0 0 / 0.7);
    --color-black-80: rgb(0 0 0 / 0.8);
    --color-white: rgb(255 255 255);
    --color-white-10: rgb(255 255 255 / 0.1);
    --color-white-30: rgb(255 255 255 / 0.3);
    --color-white-35: rgb(255 255 255 / 0.35);
    --color-white-50: rgb(255 255 255 / 0.5);
    --color-deep-surface: rgb(18 18 18);
  }

  @supports (color: color(display-p3 1 1 1)) {

    /* Mooie p3 kleurtjes bron Sanne */
    :root {
      --color-bg: color(display-p3 0.067 0.067 0.067);
      --color-text: color(display-p3 0.907 0.932 0.962);
      --color-danger: color(display-p3 0.822 0.033 0.017);
      --color-danger-soft: color(display-p3 0.822 0.033 0.017 / 0.1);
      --color-panel: color(display-p3 0.564 0.595 0.642);
      --color-frame: color(display-p3 0.133 0.133 0.133);
      --color-screen-glow: color(display-p3 0.177 0.967 0.072 / 0.1);
      --color-button: color(display-p3 0.858 0.874 0.896);
      --color-button-danger: color(display-p3 0.844 0.151 0.137);
      --color-button-danger-shadow: color(display-p3 0.729 0.029 0.015);
      --color-button-glow: color(display-p3 0.792 0.792 0.792);
      --color-track: color(display-p3 0.149 0.149 0.149);
      --color-slider-red: color(display-p3 0.664 0.178 0.168);
      --color-slider-green: color(display-p3 0.208 0.561 0.187);
      --color-slider-blue: color(display-p3 0.185 0.309 0.729);
      --color-knob-dark: color(display-p3 0.144 0.141 0.152);
      --color-knob-mid: color(display-p3 0.22 0.22 0.212);
      --color-bg-retro: color(display-p3 1 0.99 0.62);
      --color-text-retro: color(display-p3 0 0 0);
      --color-primary-retro: color(display-p3 1 0.08 0.57);
      --color-secondary-retro: color(display-p3 0 0.95 0.95);
      --color-border-retro: color(display-p3 1 0.08 0.57);
      --color-button-retro: color(display-p3 1 0.95 0.02);
      --color-black: color(display-p3 0 0 0);
      --color-black-20: color(display-p3 0 0 0 / 0.2);
      --color-black-30: color(display-p3 0 0 0 / 0.3);
      --color-black-35: color(display-p3 0 0 0 / 0.35);
      --color-black-40: color(display-p3 0 0 0 / 0.4);
      --color-black-50: color(display-p3 0 0 0 / 0.5);
      --color-black-60: color(display-p3 0 0 0 / 0.6);
      --color-black-70: color(display-p3 0 0 0 / 0.7);
      --color-black-80: color(display-p3 0 0 0 / 0.8);
      --color-white: color(display-p3 1 1 1);
      --color-white-10: color(display-p3 1 1 1 / 0.1);
      --color-white-30: color(display-p3 1 1 1 / 0.3);
      --color-white-35: color(display-p3 1 1 1 / 0.35);
      --color-white-50: color(display-p3 1 1 1 / 0.5);
      --color-deep-surface: color(display-p3 0.07 0.07 0.07);
    }
  }

  html,
  body {
    height: 100%;
  }

  body {
    font-family: "VT323", monospace;
    font-weight: 400;
    font-style: normal;
    background: var(--color-bg);
    color: var(--color-text);
  }
}

@layer layout {
  main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 360px));
    gap: clamp(0.75rem, 2.5vw, 2rem);
    justify-content: center;
    width: min(100%, var(--layout-max));
    margin: clamp(1rem, 5vw, 3.5rem) auto;
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    perspective: 1000px;
  }

  main > div:first-of-type {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    font-size: clamp(1.2rem, 4.2vw, 2rem);
    color: var(--color-danger);
    text-shadow: 0 0 2px var(--color-black-80);
    animation: blink 3s infinite;

    border: 1px solid var(--color-danger);
    border-radius: 6px;

    background-color: var(--color-danger-soft);

    &::after {
      content: " ☢️";
      margin-top: 8px;
    }

    &::before {
      content: "☢️ ";
      margin-top: 8px;
    }

    > span:last-of-type {
      display: none;
    }
  }

  main > div:last-of-type {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 6px;
    position: relative;
  }

  main > div:last-of-type > figure {
    margin: 0;
    width: 100%;
    height: 320px;
    position: relative;
    overflow: hidden;
  }

  main > div:last-of-type > figure:nth-of-type(1) {
    border-radius: 6px 0 0 6px;
  }

  main > div:last-of-type > figure:nth-of-type(2) {
    border-radius: 0;
  }

  main > div:last-of-type > figure:nth-of-type(3) {
    border-radius: 0 6px 6px 0;
  }

  main > fieldset {
    width: 100%;
    min-height: 210px;
    justify-self: center;
    border: none;
    background: var(--color-panel);
    border-radius: var(--radius-panel);
    padding: clamp(14px, 2.5vw, 22px);
    position: relative;
    transform-style: preserve-3d;
  }

  main > fieldset:nth-of-type(1) {
    grid-column: 1;
    max-width: 360px;
    transform: rotateX(55deg) rotateZ(-12deg) translateZ(30px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
  }

  main > fieldset:nth-of-type(2) {
    grid-column: 2;
    max-width: 240px;
    min-height: 200px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateX(55deg) rotateZ(0deg) translateZ(60px);
  }

  main > fieldset:nth-of-type(3) {
    grid-column: 3;
    max-width: 360px;
    transform: rotateX(55deg) rotateZ(12deg) translateZ(30px);
  }

  @media (max-width: 1100px) {
    main {
      grid-template-columns: repeat(2, minmax(0, 360px));
      width: min(100%, 780px);
    }

    main > fieldset:nth-of-type(1),
    main > fieldset:nth-of-type(2),
    main > fieldset:nth-of-type(3) {
      grid-column: auto;
      max-width: 360px;
      width: 100%;
      transform: none;
    }

    main > fieldset:nth-of-type(2) {
      min-height: 180px;
    }
  }

  @media (max-width: 768px) {
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: min(100%, 460px);
      perspective: none;
    }

    main > div:last-of-type {
      display: grid;
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      border: 4px solid var(--color-frame);
      border-radius: 10px;
      background: var(--color-black-20);
    }

    main > div:last-of-type > figure {
      min-height: 220px;
      height: auto;
      aspect-ratio: 16 / 10;
      border-radius: 0;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }

    main > fieldset {
      width: min(100%, 360px);
      min-height: initial;
      border-radius: 6px;
      transform: none;
    }

    main > fieldset:nth-of-type(2) {
      min-height: 180px;
    }

  }

  @media (max-width: 480px) {
    main {
      margin-block: 1rem 1.5rem;
      padding-inline: 0.6rem;
    }

    main > div:first-of-type {
      border-radius: 4px;
    }
  }
}

@layer effects {
  main > div:last-of-type {
    &::before {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      border-radius: 10px;
      background-image: radial-gradient(
        circle,
        var(--color-screen-glow) 0%,
        var(--color-black-60) 100%
      );
      background-size: 100% 100%;
      border: 4px solid var(--color-frame);
      box-shadow:
        0 8px 30px var(--color-black-70),
        inset 0 0 20px var(--color-black-80),
        inset 0 0 0 1px var(--color-white-10);
      z-index: 2;
      pointer-events: none;
    }

    > figure {
      &::before {
        content: "● REC";
        position: absolute;
        top: 15px;
        left: 15px;
        color: var(--color-danger);
        font-family: "VT323", monospace;
        font-weight: 400;
        font-style: normal;
        font-size: clamp(1.2rem, 2.2vw, 2rem);
        text-shadow: 0 0 2px var(--color-black-80);
        animation: blink 2s infinite;
        z-index: 3;
        pointer-events: none;
      }

      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform-origin: center;
        filter: sepia(100%) hue-rotate(60deg) contrast(1.4) brightness(0.9)
          blur(0.5px);
      }

      &::after {
        content: "";
        inset: 0;
        position: absolute;
        opacity: 0;
        z-index: 2;
        pointer-events: none;

        /* Maak een static tv screen als background image */
        /* AI-hulp: GitHub Copilot (https://github.com/features/copilot) */
        background-image:
          repeating-conic-gradient(
            from 0deg,
            var(--color-white) 0% 25%,
            var(--color-black) 25% 50%
          ),
          repeating-linear-gradient(
            90deg,
            var(--color-white-35) 0 1px,
            var(--color-black-35) 1px 2px
          ),
          radial-gradient(circle at center, var(--color-white-30), var(--color-black));
        background-size:
          3px 3px,
          2px 2px,
          100% 100%;
        background-color: var(--color-deep-surface);
      }
    }
  }

  @media (max-width: 768px) {
    main > div:last-of-type {
      &::before {
        display: none;
      }

      > figure {
        &::before {
          font-size: clamp(1.2rem, 6vw, 1.6rem);
        }
      }
    }
  }
}

@layer components {
  main > fieldset:nth-of-type(1) > div {
    width: clamp(54px, 15vw, 68px);
    aspect-ratio: 1;
    position: relative;
  }

  main > fieldset:nth-of-type(1) > div::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-black);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  main > fieldset:nth-of-type(1) > div:nth-of-type(1)::after {
    --start-rotation: 0deg;
  }

  main > fieldset:nth-of-type(1) > div:nth-of-type(2)::after {
    --start-rotation: 25deg;
  }

  main > fieldset:nth-of-type(1) > div:nth-of-type(3)::after {
    --start-rotation: 50deg;
  }

  main > fieldset:nth-of-type(1) > div:nth-of-type(4)::after {
    --start-rotation: 25deg;
  }

  main > fieldset:nth-of-type(1) > div::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 42%;
    background: var(--color-black);
    transform-origin: 50% 100%;
    translate: 0 0;
    transform: translate(-50%, -100%)
      rotate(
        calc(
          (var(--slider-vier) * 3.5deg) + var(--start-rotation) + var(--needle-spin)
        )
      );
    animation: pointer-glitch 0.08s steps(2, end) infinite;
    transition: transform 0.35s linear;
    z-index: 1;
  }

  main > fieldset:nth-of-type(1) > div > progress {
    appearance: none;
    display: block;
    width: 100%;
    height: 68px;
    aspect-ratio: 1;
    border: 1.5px solid var(--color-black);
    border-radius: 50%;
    background:
      radial-gradient(
        circle at center,
        var(--color-white) 0 63%,
        transparent 63%
      ),
      repeating-conic-gradient(
        from -90deg,
        var(--color-black) 0deg 1.2deg,
        transparent 1.2deg 12deg
      ),
      var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-white-50);
    overflow: hidden;

    &::-webkit-progress-bar {
      background: transparent;
    }

    &::-webkit-progress-value {
      background: transparent;
    }

    &::-moz-progress-bar {
      background: transparent;
    }
  }

  main > fieldset:nth-of-type(2) input[type="checkbox"] {
    appearance: none;
    width: clamp(84px, 24vw, 110px);
    height: clamp(84px, 24vw, 110px);
    border-radius: 12px;
    background: var(--color-button);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    &::before {
      content: "";
      width: clamp(54px, 16vw, 70px);
      height: clamp(54px, 16vw, 70px);
      border-radius: 50%;
      background: var(--color-button-danger);
      display: block;

      transform: translateY(-18px);
      box-shadow:
        0 18px 0 var(--color-button-danger-shadow),
        0 8px 0 var(--color-button-danger-shadow),
        0 0 20px var(--color-button-glow);
    }

    &:active::before,
    &:checked::before {
      transform: translateY(5px);
      box-shadow:
        inset 0 12px 0 var(--color-button-danger-shadow);
    }
  }

  /* Bron: CodePen – Pen VwqzBqj (https://codepen.io/nicolasjesenberger/pen/VwqzBqj), aangepast voor dit project */
  main > fieldset:nth-of-type(3) > input[type="range"] {
    appearance: none;
    width: 100%;
    height: clamp(0.35em, 0.7vw, 0.45em);
    background: var(--color-track);
    border-radius: 3.125em;
    outline: none;
    margin: clamp(10px, 2vw, 14px) 0;
    cursor: pointer;
    box-shadow:
      inset 0 0.0625em 0.125em var(--color-black-40),
      0 1px 1px var(--color-white-10);

    &:nth-of-type(1) {
      --slider-color: var(--color-slider-red);
    }

    &:nth-of-type(2) {
      --slider-color: var(--color-slider-green);
    }

    &:nth-of-type(3) {
      --slider-color: var(--color-slider-blue);
    }

    &:nth-of-type(4) {
      --slider-color: var(--color-slider-red);
    }

    &::-webkit-slider-thumb {
      appearance: none;
      width: 2em;
      height: 2em;
      border: none;
      border-radius: 0.0625em;
      cursor: pointer;
      background: linear-gradient(
        90deg,
        var(--color-knob-dark) 0%,
        var(--color-knob-dark) 16.65%,
        var(--color-knob-mid) 20.35%,
        var(--color-knob-mid) 37%,
        var(--slider-color) 37%,
        var(--slider-color) 63%,
        var(--color-knob-mid) 63%,
        var(--color-knob-mid) 79.65%,
        var(--color-knob-dark) 83.35%,
        var(--color-knob-dark) 100%
      );
      box-shadow:
        0 0 0.25em 0.0625em var(--color-black-20),
        0 0.25em 0.25em var(--color-black-30),
        inset 0.03125em 0 0 0.03125em var(--color-black-30),
        inset -0.03125em 0 0 0.03125em var(--color-black-30),
        inset 0 0.0625em 0.03125em var(--color-black-50),
        inset 0 -0.0625em 0.03125em var(--color-black-50);
      margin-top: -0.8125em;
    }

    &::-webkit-slider-runnable-track {
      height: 0.375em;
      background: var(--color-track);
      border-radius: 3.125em;
      box-shadow:
        inset 0 0.0625em 0.125em var(--color-black-40),
        0 1px 1px var(--color-white-10);
    }

    &::-moz-range-thumb {
      width: 2em;
      height: 2em;
      border: none;
      border-radius: 0.0625em;
      cursor: pointer;
      background: linear-gradient(
        90deg,
        var(--color-knob-dark) 0%,
        var(--color-knob-dark) 16.65%,
        var(--color-knob-mid) 20.35%,
        var(--color-knob-mid) 37%,
        var(--slider-color) 37%,
        var(--slider-color) 63%,
        var(--color-knob-mid) 63%,
        var(--color-knob-mid) 79.65%,
        var(--color-knob-dark) 83.35%,
        var(--color-knob-dark) 100%
      );
      box-shadow:
        0 0 0.25em 0.0625em var(--color-black-20),
        0 0.25em 0.25em var(--color-black-30),
        inset 0.03125em 0 0 0.03125em var(--color-black-30),
        inset -0.03125em 0 0 0.03125em var(--color-black-30),
        inset 0 0.0625em 0.03125em var(--color-black-50),
        inset 0 -0.0625em 0.03125em var(--color-black-50);
      margin-top: -0.8125em;
    }

    &::-moz-range-track {
      height: 0.375em;
      background: var(--color-track);
      border-radius: 3.125em;
      box-shadow:
        inset 0 0.0625em 0.125em var(--color-black-40),
        0 1px 1px var(--color-white-10);
    }
  }
}

@layer animations {
  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  @keyframes pointer-glitch {
    0% {
      translate: 0 0;
    }

    25% {
      translate: calc(var(--slider-vier-kritiek) * -1px)
        calc(var(--slider-vier-kritiek) * 1px);
    }

    50% {
      translate: calc(var(--slider-vier-kritiek) * 1px)
        calc(var(--slider-vier-kritiek) * -1px);
    }

    75% {
      translate: calc(var(--slider-vier-kritiek) * -1px)
        calc(var(--slider-vier-kritiek) * -1px);
    }

    100% {
      translate: calc(var(--slider-vier-kritiek) * 1px)
        calc(var(--slider-vier-kritiek) * 1px);
    }
  }

  @keyframes pointer-overdrive {
    from {
      --needle-spin: 0deg;
    }

    to {
      --needle-spin: 360deg;
    }
  }

    @keyframes scanline {
    0% {
      background-position:
        center 0,
        center center;
    }

    100% {
      background-position:
        center 4px,
        center center;
    }
  }


  @keyframes tv-off {
    0% {
      transform: scale(1);
      opacity: 1;
      filter: sepia(100%) hue-rotate(60deg) contrast(1.4) brightness(0.9)
        blur(0.5px);
    }

    25% {
      transform: scaleY(0.06);
      opacity: 1;
      filter: brightness(4) saturate(0) contrast(1.4);
    }

    45% {
      transform: scaleY(0.01) scaleX(1);
      opacity: 1;
      filter: brightness(12) saturate(0) contrast(1.8);
    }

    65% {
      transform: scaleY(0.01) scaleX(0.08);
      opacity: 1;
      filter: brightness(7) saturate(0) contrast(1.6);
    }

    85% {
      transform: scale(0.005);
      opacity: 0.4;
      filter: brightness(1.2) saturate(0);
    }

    100% {
      transform: scale(0);
      opacity: 0;
      filter: brightness(0);
    }
  }
}

@layer overrides {
  /* Bron: MDN Web Docs – Container size and style queries (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries) */
  @container style(--slider-vier: 100) {
    main > fieldset:nth-of-type(1) > div::after {
      animation:
        pointer-glitch 0.04s steps(2, end) infinite,
        pointer-overdrive 0.12s linear infinite;
    }
  }


  
  @container style(--slider-een: 100) {
    @container style(--slider-twee: 100) {
      @container style(--slider-drie: 10) {
        @container style(--slider-vier: 100) {
          main > div:last-of-type > figure:nth-of-type(1) > img {
            animation: tv-off 1.4s ease-in forwards;
          }

          main > div:last-of-type > figure:nth-of-type(2) > img {
            animation: tv-off 1.4s ease-in forwards;
            animation-delay: 0.4s;
          }

          main > div:last-of-type > figure:nth-of-type(3) > img {
            animation: tv-off 1.4s ease-in forwards;
            animation-delay: 0.7s;
          }

          main > div:last-of-type > figure::before {
            content: "";
          }

                  main > div:first-of-type {
          display: block;
        }
        }


      }
    }
  }

  main:has(input[type="checkbox"]:checked) {
    background: var(--color-bg-retro);
    color: var(--color-text-retro);
  }

  main:has(input[type="checkbox"]:checked) > div:first-of-type {
    background-color: var(--color-bg-retro);
    border: 4px solid var(--color-border-retro);
    border-radius: 0;
    color: var(--color-primary-retro);
    font-family: "Comic Sans MS", cursive;
    text-shadow: 2px 2px 0 var(--color-black);
    font-size: clamp(1.2rem, 4.2vw, 2rem);
  }

  main:has(input[type="checkbox"]:checked) > div:first-of-type > span:first-of-type {
    display: none;
  }

  main:has(input[type="checkbox"]:checked) > div:first-of-type::before,
  main:has(input[type="checkbox"]:checked) > div:first-of-type::after {
    content: none;
  }

  main:has(input[type="checkbox"]:checked) > div:first-of-type > span:last-of-type {
    display: inline;

    &::after {
      content: "💕";
      margin-top: 8px;
    }

    &::before {
      content: "😳";
      margin-top: 8px;
    }
  }

  main:has(input[type="checkbox"]:checked) > div:last-of-type {
    border: 8px solid var(--color-border-retro) !important;
    border-radius: 0;
    background: var(--color-bg-retro) !important;
    transform: rotate(-2deg);
  }

  main:has(input[type="checkbox"]:checked) > div:last-of-type::before {
    display: none;
  }

  main:has(input[type="checkbox"]:checked) > div:last-of-type > figure > img {
    filter: saturate(2) contrast(1.3) brightness(1.1) !important;
    opacity: 1;
  }

  main:has(input[type="checkbox"]:checked) > div:last-of-type > figure:nth-of-type(1) > img {
    content: url("assets/huis.png");
  }

  main:has(input[type="checkbox"]:checked) > div:last-of-type > figure:nth-of-type(2) > img {
    content: url("assets/teletubbies.png");
  }

  main:has(input[type="checkbox"]:checked) > div:last-of-type > figure:nth-of-type(3) > img {
    content: url("assets/zon.png");
  }

  main:has(input[type="checkbox"]:checked) > fieldset {
    background: var(--color-button-retro);
    border: 6px outset var(--color-border-retro);
    border-radius: 0;
    color: var(--color-text-retro);
    font-family: "Comic Sans MS", cursive;
    transform: none !important;
  }

  main:has(input[type="checkbox"]:checked) > fieldset:nth-of-type(1) {
    transform: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
  }

  main:has(input[type="checkbox"]:checked) > fieldset:nth-of-type(2) {
    transform: none !important;
    min-height: 180px;
  }

  main:has(input[type="checkbox"]:checked) > fieldset:nth-of-type(3) {
    transform: none !important;
  }

  main:has(input[type="checkbox"]:checked) > fieldset:nth-of-type(1) > div {
    width: 80px;
    height: 80px;
  }

  main:has(input[type="checkbox"]:checked) > fieldset:nth-of-type(1) > div > progress {
    border: 3px solid var(--color-text-retro);
    background: linear-gradient(135deg, var(--color-secondary-retro) 0%, var(--color-button-retro) 100%);
    border-radius: 0;
  }

  main:has(input[type="checkbox"]:checked) input[type="checkbox"] {
    appearance: none;
    width: 100px;
    height: 100px;
    background: var(--color-button-retro);
    border: 6px outset var(--color-border-retro);
    border-radius: 0;
    cursor: pointer;
  }

  main:has(input[type="checkbox"]:checked) input[type="checkbox"]::before {
    content: "✓";
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    display: block;
    font-size: 3rem;
    color: var(--color-text-retro);
    box-shadow: none;
    transform: none !important;
  }

  main:has(input[type="checkbox"]:checked) input[type="checkbox"]:checked::before {
    box-shadow: none;
    transform: none !important;
  }

  main:has(input[type="checkbox"]:checked) input[type="range"] {
    appearance: none;
    background: linear-gradient(90deg, var(--color-primary-retro) 0%, var(--color-secondary-retro) 100%);
    border-radius: 0;
  }

  main:has(input[type="checkbox"]:checked) input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--color-primary-retro);
    border: 3px solid var(--color-text-retro);
    border-radius: 0;
    box-shadow: none;
  }

  main:has(input[type="checkbox"]:checked) input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--color-primary-retro);
    border: 3px solid var(--color-text-retro);
    border-radius: 0;
    box-shadow: none;
  }

  body:has(main input[type="checkbox"]:checked) {
    background: var(--color-bg-retro);
    font-family: "Comic Sans MS", cursive;
    color: var(--color-text-retro);
  }
}