:root {
  --hue: 182.77deg;
  --accent-ofset: 180;

  --primary-100: oklch(from var(--primary-500) .95 c h);
  --primary-300: oklch(from var(--primary-500) .9 c h);
  --primary-500: light-dark(oklch(.7503 0.117 var(--hue)), oklch(.8549 0.1149 var(--hue)));
  --primary-700: oklch(from var(--primary-500) .7 c h);
  --primary-900: oklch(from var(--primary-500) .6 c h);

  --secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
  --secondary-300: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
  --secondary-500: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
  --secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
  --secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));

  --surface-300: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
  --surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
  --surface-500: oklch(from var(--surface-400) calc(l + .025) c h);
  --surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
  --surface-700: oklch(from var(--surface-600) calc(l + .025) c h);

  --text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h));
  --text-2: oklch(from var(--text-1) calc(l + .1) c h);

  --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));
  --fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3));
  --warn: light-dark(oklch(.82 .18 78.9), oklch(.82 .18 78.9));
  --succ: light-dark(oklch(.86 .28 150), oklch(.86 .28 150));

  --radii-s: .125em;
  --radii-m: .25em;
  --radii-l: .5em;
  --radii-xl: 1em;

  --text-s: .8rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-xl: 1.6rem;
  --text-xxl: 2rem;

  --padding-s: .25em;
  --padding-m: .5em;
  --padding-l: .75em;
  --padding-xl: 1em;
  --padding-xxl: 1.5em;
}

html {
  inline-size: 100%;
  block-size: 100%;
  overflow: clip;
}

body {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: clip;

  display: grid;
  grid: 100% / 100%;

  background-color: var(--surface-300);
  color: var(--text-2);
  accent-color: var(--primary-500);

  margin: 0;

  font-family: sans-serif;

  * {
    box-sizing: border-box;

    &:focus-visible {
      outline: 1px solid var(--info);
    }
  }
}

a {
  color: var(--primary-500);
}

h1 {
  color: var(--text-1);
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 100;
  line-height: 1.1;
}

p {
  line-height: 1.35;
  margin: 0;
}

code {
  padding-inline: var(--padding-s);
  background-color: var(--surface-500);
  border: 1px solid var(--surface-700);
  border-radius: var(--radii-m);
}

@property --hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}