/* ====================================
Root
==================================== */
:root {
   /* Font Order: Apple, Microsoft, Linux, Android */
   --font-sans: system-ui, -apple-system, 'Apple Color Emoji', 'Segoe UI',
      'Segoe UI Emoji', Ubuntu, Cantarell, 'DejaVu Sans', Roboto,
      'Noto Color Emoji', Helvetica, Arial, sans-serif;
   --font-mono: ui-monospace, 'Segoe UI Mono', 'Ubuntu Monospace',
      'DejaVu Sans Mono', 'Roboto Mono', monospace;

   --base: 1.25rem;

   --space-1: calc(var(--base) * 0.25);
   --space-2: calc(var(--base) * 0.5);
   --space-3: calc(var(--base) * 0.75);
   --space-4: var(--base);
   --space-5: calc(var(--base) * 2);
   --space-6: calc(var(--base) * 4);

   --font-size-1: calc(var(--base) * 0.75);
   --font-size-2: calc(var(--base) * 0.875);
   --font-size-3: var(--base);
   --font-size-4: calc(var(--base) * 1.5);
   --font-size-5: calc(var(--base) * 2);
   --font-size-6: calc(var(--base) * 2.5);

   --line-height-1: 1;
   --line-height-2: 1.25;
   --line-height-3: 1.5;

   --thickness-1: 2px;

   --space-near: var(--space-2);
   --space-away: var(--space-4);

   --z-index-n-1: -10;
   --z-index-0: 0;
   --z-index-1: 10;
   --z-index-2: 20;

   --ease-out-back: cubic-bezier(0.18, 0.89, 0.32, 1.28);

   --section-inline-size: 45rem;

   --font-weight-1: 400;
   --font-weight-2: 700;

   --duration-1: 0.2s;
   --duration-2: 0.4s;
   --duration-3: 0.8s;

   scrollbar-color: var(--theme-glare) transparent;
}

/* ====================================
Theme
==================================== */
.theme--eftl {
   --theme-shade: light-dark(oklch(0.96 0.1 125), oklch(0.28 0.07 130));
   --theme-shade-alt: light-dark(oklch(0.92 0.1 125), oklch(0.32 0.07 130));
   --theme-glare: light-dark(oklch(0.32 0.07 130), oklch(0.92 0.1 125));
   --theme-glare-max: light-dark(oklch(0 0 0), oklch(1 0 0));
}

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

html {
   touch-action: manipulation;
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

html,
body {
   -webkit-tap-highlight-color: transparent;
   background-color: var(--theme-shade);
   color: var(--theme-glare);
   font-family: var(--font-sans);
}

body {
   display: flex;
   flex-direction: column;
   min-block-size: 100vh;
   margin: 0;
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
   font-weight: var(--font-weight-1);
   text-wrap: pretty;
   overflow-wrap: anywhere;
   word-break: normal;
   padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
      env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

figcaption,
p,
pre,
strong,
em,
ul,
ol,
li {
   max-inline-size: 70ch;
}

strong {
   color: var(--theme-glare-max);
}

ul,
ol {
   margin: 0;
   padding: 0;
   padding-inline-start: 1em;
}

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

video {
   inline-size: 100%;
   block-size: auto;
}

svg {
   display: block;
   flex-shrink: 0;
}

input,
button,
textarea,
select {
   font-family: inherit;
   font-size: inherit;
}

textarea {
   min-block-size: 10em;
}

:target {
   scroll-margin-block: 4ex;
}

:focus {
   outline: none;
}

:focus-visible {
   outline-width: var(--thickness-1);
   outline-style: solid;
   outline-color: currentColor;
   outline-offset: var(--thickness-1);
}

main {
   flex-grow: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
   max-inline-size: 40ch;
   color: var(--theme-glare-max);
   text-wrap: balance;
   font-weight: var(--font-weight-2);
   line-height: var(--line-height-1);
}

h1 {
   font-size: var(--font-size-6);
}

h2 {
   font-size: var(--font-size-5);
}

h3,
h4,
h5,
h6 {
   font-size: var(--font-size-4);
}

p {
   margin: 0;
}

a {
   --link-thickness: var(--thickness-1);
   --link-offset: var(--thickness-1);

   text-decoration-skip-ink: auto;
   text-decoration: underline;
   color: var(--theme-glare-max);
   text-decoration-color: var(--theme-glare);
   text-decoration-thickness: var(--link-thickness);
   text-underline-offset: var(--link-offset);
   -webkit-box-decoration-break: slice;
   box-decoration-break: slice;
   cursor: default;
}

/* ====================================
Layout
==================================== */
.section-wrapper {
   display: block;
   position: relative;
}

.section {
   display: block;
   margin-inline: auto;
   max-inline-size: var(--section-inline-size);
   padding-block: var(--space-6);
   padding-inline: var(--space-4);
}

.section--small {
   padding-block: var(--space-4);
}

.stack {
   --stack-flow: var(--space-away);
   display: flex;
   flex-direction: column;
}

.stack > * {
   margin-block-start: 0;
}

.stack > * + * {
   margin-block-start: var(--stack-flow);
}

.grid {
   --grid-gap: var(--space-5);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
   gap: var(--grid-gap);
}

.grid img {
   inline-size: 100%;
   block-size: auto;
}

.cluster {
   --cluster-gap: var(--space-near);
   display: flex;
   flex-wrap: wrap;
   gap: var(--cluster-gap);
   justify-content: start;
   align-items: center;
}

.swap {
   --swap-gap: var(--space-near);
   display: flex;
   flex-wrap: wrap;
   gap: var(--swap-gap);
   flex-basis: 100%;
}

.swap > * {
   flex-grow: 1;
   flex-shrink: 0;
   /* flex-shrink: 1; */
   min-inline-size: fit-content;
   inline-size: calc(50% - var(--swap-gap));
}

.swap > :first-of-type {
   inline-size: calc(50% - var(--swap-gap));
}

.swap > :nth-last-child(n + 3),
.swap > :nth-last-child(n + 3) ~ * {
   flex-basis: 100%;
}

.prose > * {
   margin-block-start: 0;
}

.prose > * + * {
   --prose-flow: var(--space-away);
   margin-block-start: var(--prose-flow);
}

/* ====================================
Form
==================================== */
.button {
   display: inline-flex;
   background-color: var(--bg);
   color: var(--fg);
   border: var(--thickness-1) solid var(--oc);
   text-decoration: none;
   line-height: var(--line-height-2);
   justify-content: center;
   align-items: center;
   gap: var(--space-near);
   text-align: start;
   transition: transform var(--duration-1) var(--ease-out-back);
   padding-block: var(--space-near);
   padding-inline: var(--space-near);
   flex-shrink: 0;
}

.button svg {
   inline-size: 1.25em;
   block-size: auto;
   align-self: start;
}

button[data-playing='true'] [data-icon='play'] {
   display: none;
}

button[data-playing='false'] [data-icon='pause'] {
   display: none;
}

.button:focus-visible {
   outline-offset: calc(var(--thickness-1) * -3);
}

.button[data-pressed],
.button:active {
   transform: scale(0.9);
}

.solid,
.outline,
.ghost {
   background-color: var(--bg);
   color: var(--fg);
   border-color: var(--oc);
   border-width: var(--thickness-1);
   border-style: solid;
   background-origin: border-box; /* Extend background under transparent border */
}

.solid,
.button[data-selected] {
   --bg: var(--theme-glare);
   --fg: var(--theme-shade);
   --oc: transparent;
}

.outline {
   --bg: transparent;
   --fg: var(--theme-glare);
   --oc: var(--theme-glare);
   background-clip: padding-box; /* Prevent transparent border from overlapping with transparent background */
}

.ghost {
   --bg: transparent;
   --fg: var(--theme-glare);
   --oc: transparent;
}

.button[data-selected] {
   background-origin: border-box; /* Extend background under transparent border */
}

body {
   --s: var(--space-away);
   --c1: var(--theme-shade);
   --c2: var(--theme-shade-alt);
   --_g: var(--c2) 90deg, #0000 90.5deg;
   background: conic-gradient(from -45deg, var(--_g)),
      conic-gradient(from 135deg, var(--_g)) calc(var(--s) / 2) 0, var(--c1);
   background-size: var(--s) var(--s);
   background-attachment: fixed;
}