@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://unpkg.com/normalize.css") layer(normalize);

@layer normalize, vars, base, content, effect;

@layer effect {
  :root {
    --height: 86;
    --width: 300;
    --radius: 43;
    --frost: 0.5;
    --saturation: 1;
  }
  
  .effects-container {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    inset: 0;
  }
  
  .effect,
  .effect2,
  .effect3 {
    height: calc(var(--height) * 1px);
    width: calc(var(--width) * 1px);
    border-radius: calc(var(--radius) * 1px);
    z-index: 999999;
    background: light-dark(
      hsl(0 0% 100% / var(--frost, 0)),
      hsl(0 0% 0% / var(--frost, 0))
    );
    box-shadow: 0 0 2px 1px
        light-dark(
          color-mix(in oklch, canvasText, #0000 85%),
          color-mix(in oklch, canvasText, #0000 65%)
        )
        inset,
      0 0 10px 4px
        light-dark(
          color-mix(in oklch, canvasText, #0000 90%),
          color-mix(in oklch, canvasText, #0000 85%)
        )
        inset,
      0px 4px 16px rgba(17, 17, 26, 0.05), 0px 8px 24px rgba(17, 17, 26, 0.05),
      0px 0 8px rgba(17, 17, 26, 0.05), 0px 8px 24px rgba(17, 17, 26, 0.2),
      0px 16px 56px rgba(17, 17, 26, 0.05),
      0px 4px 16px rgba(17, 17, 26, 0.05) inset,
      0px 8px 24px rgba(17, 17, 26, 0.05) inset,
      0px 16px 56px rgba(17, 17, 26, 0.05) inset;

    * {
      pointer-events: none;
    }
  }
  
  .effect {
    -webkit-backdrop-filter: url(#filter) saturate(var(--saturation, 1));
            backdrop-filter: url(#filter) saturate(var(--saturation, 1));
  }
  
  .effect2 {
    -webkit-backdrop-filter: url(#warp) saturate(var(--saturation, 1));
            backdrop-filter: url(#warp) saturate(var(--saturation, 1));
  }
  
  .effect3 {
    -webkit-backdrop-filter: url(#rgb-split) saturate(var(--saturation, 1));
            backdrop-filter: url(#rgb-split) saturate(var(--saturation, 1));
  }
  
  .badge {
    position: absolute;
    top: -30px;
    left: 0;
    text-align: center;
    border-radius: 100dvh;
    background: light-dark(oklab(from var(--black) l a b / 0.8), oklab(from var(--white) l a b  / 0.8));
    color: var(--secondary);
    font-size: var(--step--1);
    font-weight: 600;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 2px 8px;
  }
  
  .badge--e1 {
    background-color: var(--green);
  }
  
  .badge--e2 {
    background-color: var(--orange);
  }
  
  .badge--e3 {
    background-color: var(--purple);
  }

  .filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }
}

@layer content {
  .container {
    max-width: 85%;
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-xl);
  }

  h1 {
    font-size: var(--step-5);
    margin-bottom: var(--space-xs);
  }

  h1 + p {
    font-size: var(--step-1);
    line-height: var(--space-l);
  }

  h2 {
    font-size: var(--step-3);
    margin-bottom: var(--space-s);
  }

  p {
    font-size: var(--step-0);
    line-height: var(--space-m);
  }
}

@layer vars {
  :root {
    --yellow: yellow;
    --orange: orange;
    --red: red;
    --cyan: cyan;
    --green: green;
    --blue: blue;
    --purple: rebeccapurple;
    --pink: pink;
    --white: white;
    --black: black;
    --primary: light-dark(var(--black), var(--white));
    --secondary: canvas;
    --emphasis: var(--purple);

    /* @link https://utopia.fyi/type/calculator?c=320,18,1.25,1440,28,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.72rem, 0.7046rem + 0.0769vw, 0.7738rem);
    --step--1: clamp(0.9rem, 0.8624rem + 0.1879vw, 1.0315rem);
    --step-0: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);
    --step-1: clamp(1.4063rem, 1.2844rem + 0.6095vw, 1.8329rem);
    --step-2: clamp(1.7578rem, 1.562rem + 0.9792vw, 2.4432rem);
    --step-3: clamp(2.1973rem, 1.8945rem + 1.5136vw, 3.2568rem);
    --step-4: clamp(2.7466rem, 2.2909rem + 2.2782vw, 4.3413rem);
    --step-5: clamp(3.4332rem, 2.7607rem + 3.3625vw, 5.787rem);

    --cqi-step--2: clamp(0.72rem, 0.7046rem + 0.0769cqi, 0.7738rem);
    --cqi-step--1: clamp(0.9rem, 0.8624rem + 0.1879cqi, 1.0315rem);
    --cqi-step-0: clamp(1.125rem, 1.0536rem + 0.3571cqi, 1.375rem);
    --cqi-step-1: clamp(1.4063rem, 1.2844rem + 0.6095cqi, 1.8329rem);
    --cqi-step-2: clamp(1.7578rem, 1.562rem + 0.9792cqi, 2.4432rem);
    --cqi-step-3: clamp(2.1973rem, 1.8945rem + 1.5136cqi, 3.2568rem);
    --cqi-step-4: clamp(2.7466rem, 2.2909rem + 2.2782cqi, 4.3413rem);
    --cqi-step-5: clamp(3.4332rem, 2.7607rem + 3.3625cqi, 5.787rem);

    /* @link https://utopia.fyi/space/calculator?c=320,18,1.25,1440,22,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.3125rem, 0.2946rem + 0.0893vw, 0.375rem);
    --space-2xs: clamp(0.5625rem, 0.5268rem + 0.1786vw, 0.6875rem);
    --space-xs: clamp(0.875rem, 0.8214rem + 0.2679vw, 1.0625rem);
    --space-s: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);
    --space-m: clamp(1.6875rem, 1.5804rem + 0.5357vw, 2.0625rem);
    --space-l: clamp(2.25rem, 2.1071rem + 0.7143vw, 2.75rem);
    --space-xl: clamp(3.375rem, 3.1607rem + 1.0714vw, 4.125rem);
    --space-2xl: clamp(4.5rem, 4.2143rem + 1.4286vw, 5.5rem);
    --space-3xl: clamp(6.75rem, 6.3214rem + 2.1429vw, 8.25rem);

    --cqi-space-3xs: clamp(0.3125rem, 0.2946rem + 0.0893cqi, 0.375rem);
    --cqi-space-2xs: clamp(0.5625rem, 0.5268rem + 0.1786cqi, 0.6875rem);
    --cqi-space-xs: clamp(0.875rem, 0.8214rem + 0.2679cqi, 1.0625rem);
    --cqi-space-s: clamp(1.125rem, 1.0536rem + 0.3571cqi, 1.375rem);
    --cqi-space-m: clamp(1.6875rem, 1.5804rem + 0.5357cqi, 2.0625rem);
    --cqi-space-l: clamp(2.25rem, 2.1071rem + 0.7143cqi, 2.75rem);
    --cqi-space-xl: clamp(3.375rem, 3.1607rem + 1.0714cqi, 4.125rem);
    --cqi-space-2xl: clamp(4.5rem, 4.2143rem + 1.4286cqi, 5.5rem);
    --cqi-space-3xl: clamp(6.75rem, 6.3214rem + 2.1429cqi, 8.25rem);
  }
}

@layer base {
  :root { 
    scrollbar-color: canvasText #0000;
  }
  
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme="light"] {
    color-scheme: light only;
  }

  [data-theme="dark"] {
    color-scheme: dark only;
  }

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: "Geist", "SF Pro Text", "SF Pro Icons", "AOS Icons",
      "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body::before {
    --size: 12px;
    --dot: 1px;
    --color: color-mix(in hsl, canvasText, transparent 75%);

    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background: radial-gradient(
        circle at center,
        var(--color) var(--dot),
        transparent var(--dot)
      )
      0 0 / var(--size) var(--size);

    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);

            mask: linear-gradient(-20deg, transparent 50%, white);
  }
}