@charset "UTF-8";
html {
  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  :root {
    --blend-text-color: #FFF;
    --blend-back-color: #000;
    --blend-highlight-color: #000;
    --effect-bright-level: 85%;
  }
}
[data-theme=light] {
  --blend-text-color: #FFF;
  --blend-back-color: #000;
  --blend-highlight-color: #000;
}

@property --base {
  syntax: "<lenght";
  inherits: false;
  initial-value: 1.6rem;
}
@property --block-spacing {
  syntax: "<lenght>";
  inherits: true;
  initial-value: 0.4rem;
}
@property --inline-spacing {
  syntax: "<lenght>";
  inherits: true;
  initial-value: 0.8rem;
}
@property --roundness {
  syntax: "<lenght>";
  inherits: true;
  initial-value: 0.4vmin;
}
@property --spacing {
  syntax: "<lenght>";
  inherits: true;
  initial-vaue: 0.8rem;
}
body {
  --font-size: var(--md);
  font-size: var(--font-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

:where(h1) {
  --text-color: var(--accent);
  color: var(--text-color);
}

h1, h2, h3,
h4, h5, h6 {
  --spacing: var(--lg);
  margin-bottom: var(--spacing);
}

h2 {
  --spacing: var(--md) ;
}

h3, h4 {
  --spacing: var(--sm);
}

h5 {
  --spacing: var(--sm) ;
}

h6 {
  --spacing: var(--xs) ;
}

p {
  --text-color: var(--content-text);
  --font-weight: 500;
  color: var(--text-color);
  font-weight: var(--font-weight);
}
p:not(:last-child) {
  margin-bottom: var(--lg);
}

code, pre {
  --font-family: var(--font-mono, monospace);
  --bg: var(--foreground-secondary);
  --spacing: var(--xs);
  padding: var(--spacing);
  font-family: var(--font-family);
  background-color: var(--bg);
  color: var(--text-color);
}

small {
  --font-weight: 500;
  --text-color: var(--muted-text);
  font-weight: var(--font-weight);
  color: var(--text-color);
}

del {
  text-decoration: line-through;
}

p.muted, h1.muted, h2.muted, h3.muted, h4.muted, h5.muted, h6.muted, span.muted, a.muted, li.muted {
  color: var(--muted-text);
}
p.foreground, h1.foreground, h2.foreground, h3.foreground, h4.foreground, h5.foreground, h6.foreground, span.foreground, a.foreground, li.foreground {
  color: var(--foreground-text);
}

p.limited-text, h1.limited-text, h2.limited-text, h3.limited-text, h4.limited-text, h5.limited-text, h6.limited-text, span.limited-text, a.limited-text, li.limited-text {
  --_line-number: 3;
  --_text-overflow: ellipsis;
  text-overflow: var(--_text-overflow);
  line-clamp: var(--_line-number);
  -webkit-line-clamp: var(--_line-number);
  overflow: hidden;
}

a > p, h1, h2, h3, h4, h5, h6, span, a, li {
  --spacing: 0;
  padding: 0;
  margin: 0;
}

@media (prefers-color-scheme: light) {
  :where(:root, html, [data-theme=light]) {
    --text: #081426;
    --background: #f3f6fc;
    --primary: #8cb1e8;
    --secondary: #d9e5f7;
    --accent: #2e71d6;
  }
}
@media (prefers-color-scheme: dark) {
  :where(:root, html, [data-theme=dark]) {
    --text: #d9e5f7;
    --background: #03070d;
    --primary: #173c73;
    --secondary: #081426;
    --accent: #296cd1;
  }
}
.custom-gradient {
  --_gradient-from: var(--secondary);
  --_gradient-to: var(--accent);
  --_from-percentage: 0%;
  --_to-percentage: 0%;
  --_gradient-direction: to left;
  background-image: linear-gradient(var(--_gradient-direction), var(--_gradient-from) var(--_gradient-to));
}

@property --base {
  syntax: "<lenght";
  inherits: false;
  initial-value: 1.6rem;
}
@property --block-spacing {
  syntax: "<lenght>";
  inherits: true;
  initial-value: 0.4rem;
}
@property --inline-spacing {
  syntax: "<lenght>";
  inherits: true;
  initial-value: 0.8rem;
}
@property --roundness {
  syntax: "<lenght>";
  inherits: true;
  initial-value: 0.4vmin;
}
@property --spacing {
  syntax: "<lenght>";
  inherits: true;
  initial-vaue: 0.8rem;
}
:where(:root, html) {
  --roundness: unset;
  --theme: dark;
  --width: auto;
  --height: auto;
  --main-container-size: 80dvw;
  --min-layou-size: 20rem;
  --spacing-between-sections: var(--lg);
  --base: 1.6rem;
  --spacing: .8rem;
  --jump: 2;
  --spacing-y: calc(--spacing / 2);
  --spacing-x: calc(--spacing * 2);
  --destructive: #772626;
}

:where(:root[data-template=modern]) {
  --base: 2rem;
  --min-container-size: 100dvw;
}

:where(:root[data-template=classic]) {
  --base: 1rem;
}

:where(:root, html, *, *::after, *::before) {
  --offset-min: 0rem;
  --offset-sm: 1rem;
  --offset-md: 1.25rem;
  --offset-lg: 1.50rem;
  --offset-hg: 1.75rem;
  --outline-offset: var(--offset-md, 1.25rem);
  --outline-color: var(--accent);
  --outline-style: solid;
  --outline-sm: .1rem var(--outline-style) var(--outline-color);
  --outline-md: .2rem var(--outline-style) var(--outline-color);
  --outline-lg: .4rem var(--outline-style) var(--outline-color);
  --outline: var(--outline-md);
  --border-color: var(--accent);
  --border-style: solid;
  --border-sm: .1rem var(--border-style) var(--border-color);
  --border-md: .2rem var(--border-style) var(--border-color);
  --border-lg: .4rem var(--border-style) var(--border-color);
  --border-hg: .6rem var(--border-style) var(--border-color);
  --border: var(--border-sm);
  /* Small variant */
  --box-shadow-xs: 0 .1rem .2rem rgba(0, 0, 0, 0.08);
  /* Regular shadow (same as the provided --box-shadow-sm) */
  --box-shadow-sm: 0 .2rem .4rem rgba(0, 0, 0, 0.1);
  /* Larger variant */
  --box-shadow-lg: 0 .4rem .8rem rgba(0, 0, 0, 0.1);
  /* Extra large variant */
  --box-shadow-xl: 0 .8rem 1.6rem rgba(0, 0, 0, 0.15);
  /* Double extra large variant */
  --box-shadow-2xl: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  --box-shadow: var(--box-shadow-sm, 0 .2rem .4rem rgba(0, 0, 0, 0.1));
  --index-nav: 900;
  --index-popup: 999;
  --index-backtap: -1;
  --index-back: 20;
  --index-hidden-back: -20;
  --z-index: var(--index-back, 20);
  --effect-bright-level: var(--_effect-level, 150%);
  --effect-bright: brightness(var(--effect-bright-level));
  --transition-props-colors:
      background-color,
      border-color,
      color,
      fill,
      outline-color,
      text-decoration-color;
  --transition-props-motion:
      transform,
      rotate,
      scale,
      zoom;
  --transition-props-sizes:
      height,
      max-height,
      max-width,
      min-height,
      min-width,
      width;
  --transition-props-filter: filter, backdrop-filter;
  --transition-props-effect: opacity, box-shadow;
  --transition-props-all: all;
  --transition-props: unset;
  --transition-ease: ease;
  --transition-ease-in: ease-in;
  --transition-linear: linear;
  --transition-ease-in-out: ease-in-out;
  --transition-middle-break: cubic-bezier(0, .82, 1, .21);
  --transition-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --transition-out-circle: cubic-bezier(0.85, 0, 0.15, 1);
  --transition-friction: cubic-bezier(0, 1.46 ,1 ,-0.29);
  --transition-delay-in: cubic-bezier(.13, 0, 1, .13);
  --transition-jump-the-gun: cubic-bezier(.1, .65, .65, .9);
  --transition-samurai-cut: cubic-bezier(0, 1.51, 1, 1.88);
  --transition-time-reversal: cubic-bezier(0.71, 1.7, 0.76, -0.49);
  --transition-time-ssl: 2s;
  --transition-time-sl: .8s;
  --transition-time-md: .4s;
  --transition-time-ft: .2s;
  --transition-delay-short: .1s; /* Short delay */
  --transition-delay-normal: .3s; /* Normal delay */
  --transition-delay-long: .6s; /* Long delay */
}

:where(:root, html) {
  --sl: calc(var(--base) / 10);
  --3xs: calc(var(--base) / 8);
  --xxs: calc(var(--base) / 6);
  --xs: calc(var(--base) / 4);
  --sm: calc(var(--base) / 2);
  --md: var(--base);
  --lg: calc(var(--base) * 2);
  --xl: calc(var(--base) * 4);
  --xxl: calc(var(--base) * 6);
  --3xl: calc(var(--base) * 8);
  --hg: calc(var(--base) * 10);
  --light-destructive: color-mix(in oklab, var(--destructive), #FFF 30%);
  --blend-text-color: #000;
  --blend-back-color: #FFF;
  --blend-highlight-color: #FFF;
  --content-text: color-mix(in oklab, var(--text), var(--blend-text-color) 20%);
  --footer-text: color-mix(in oklab, var(--text), var(var(--blend-back-color) 75%));
  --color-method-in-oklab: in oklab;
  --color-method-srgb: in srgb;
  --color-method-oklch: in oklch;
  --color-method-hsl: in hsl;
  --color-mix-method: var(--color-method-in-oklab);
  --muted-blend-intensity: 45%;
  --muted-text: color-mix(var(--color-mix-method), var(--text), var(--blend-text-color) var(--muted-blend-intensity));
  --muted-accent: color-mix(var(--color-mix-method), var(--accent), var(--background) var(--muted-blend-intensity));
  --muted-primary: color-mix(var(--color-mix-method), var(--primary), var(--background) var(--muted-blend-intensity));
  --muted-secondary: color-mix(var(--color-mix-method), var(--secondary), var(--background) var(--muted-blend-intensity));
  --muted-destructive: color-mix(var(--color-mix-method), var(--destructive), var(--background) var(--muted-blend-intensity));
  --muted-background: color-mix(var(--color-mix-method), var(--background), var(--blend-text-color) var(--muted-blend-intensity));
  --foreground-blend-intensity: 15%;
  --foreground-text: color-mix(var(--color-mix-method), var(--text), var(--blend-highlight-color) var(--foreground-blend-intensity));
  --foreground-primary: color-mix(var(--color-mix-method), var(--primary), var(--text) var(--foreground-blend-intensity));
  --foreground-background: color-mix(var(--color-mix-method), var(--background), var(--text) var(--foreground-blend-intensity));
  --foreground-secondary: color-mix(var(--color-mix-method), var(--secondary), var(--text) var(--foreground-blend-intensity));
  --foreground-accent: color-mix(var(--color-mix-method), var(--accent), var(--text) var(--foreground-blend-intensity));
  --foreground-destructive: color-mix(var(--color-mix-method), var(--destructive), var(--text) var(--foreground-blend-intensity));
  --gradient-primary-secondary-accent: linear-gradient(90deg, rgba(23,60,115,1) 0%, rgba(8,20,38,1) 35%, rgba(41,108,209,1) 100%);
  --gradient-primary-secondary: linear-gradient(90deg, rgba(23,60,115,1) 0%, rgba(8,20,38,1) 35%);
  --gradient-secondary-accent: linear-gradient(90deg, rgba(8,20,38,1) 35%, rgba(41,108,209,1) 100%);
  --gradient-primary-accent: linear-gradient(90deg, rgba(23,60,115,1) 50%, rgba(41,108,209,1) 100%);
  --highlight-text: color-mix(in oklab, var(--text) 60%);
  --highlight-accent: color-mix(in oklab, var(--accent) 60%);
  --bp-sm: 40em;
  --bp-md: 48em;
  --bp-lg: 64em;
  --bp-hg: 80em;
  --h-full: 100%;
  --h-half: 50%;
  --h-third: 33.3333%
  --h-quarter: 25%;
  --h-screen: 100dvh;
  --h-half-screen: 50dvh;
  --h-third-screen: 33.3333dvh;
  --h-quarter-screen: 25dvh;
  --w-full: 100%;
  --w-half: 50%;
  --w-third: 33.3333%
  --w-quarter: 25%;
  --w-screen: 100dvw;
  --w-half-screen: 50dvw;
  --w-third-screen: 33.3333dvw;
  --w-quarter-screen: 25dvw;
  --grid-cols: auto-fill;
  --grid-rows: auto;
  --grid-item-width: 10rem;
  --grid-justify-items: start;
  --padding-block: var(--sm);
  --padding-inline: var(--lg);
  --roundness: var(--sm);
  --inner-round: calc(var(--spacing) - var(--roudness));
  --round-sm: var(--sm);
  --round-md: var(--md);
  --round-lg: var(--lg);
  --round-full: 50%;
  --round-peal: 100vmax;
  --font-serif: "Baskerville", "Merriweather", "Cormorant Garamond", "Times New Roman", Georgia, Times, serif;
  --font-mono: "Cascadia Code", "Roboto Mono", "Fira Code" "Inconsolata", "Red Hat Mono", monospace;
  --font-sans-serif: "Inter", system-ui, "Roboto", Poppins, Monstserrat, "Open Sans", Lato, Nunito, sans-serif;
  --font-special: "Rubik Bubbles", "Special Elite";
  --font-handwrite: Ephesis, Smooch, "Dancing Script", Cassandra, Caveat, system-ui;
  --font-slab-serif: "Roboto Slab", Arvo, "Josefin Slab", Rokkitt, sans-serif;
  --font-weight: 400;
  --font-size: var(--md);
  --line-height: var(--line-height-relaxed);
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  --font-family: var(--font-sans-serif);
  --transition: var(--transition--duration, .2s) var(--transition--timing, ease-in);
  --transition--duration: .4s;
  --transition--timing: ease;
  --transition--props: all;
  --expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

body, .app, #root {
  --bg: var(--background);
  --spacing: var(--md);
  --spacing-block: var(--md); /* Added variable for block spacing */
  --spacing-inline: var(--lg);
  --roundness: inherit;
  display: grid;
  place-items: center;
  min-height: var(--h-screen);
  background-color: var(--bg);
}
body > :where(nav, header, main, footer):not(.hero), .app > :where(nav, header, main, footer):not(.hero), #root > :where(nav, header, main, footer):not(.hero) {
  --bg: var(--background);
  background-color: var(--bg);
}
body :where(main > section, div):not(.hero, .wrapper, .hamburguer-icon, .separator), .app :where(main > section, div):not(.hero, .wrapper, .hamburguer-icon, .separator), #root :where(main > section, div):not(.hero, .wrapper, .hamburguer-icon, .separator) {
  --bg: var(--secondary);
  background-color: var(--bg);
  margin-block: var(--spacing-block);
  padding: var(--spacing);
}
body :where(main > section > :is(section, div):not(.hero, .wrapper, .hamburguer-icon, .separator)), .app :where(main > section > :is(section, div):not(.hero, .wrapper, .hamburguer-icon, .separator)), #root :where(main > section > :is(section, div):not(.hero, .wrapper, .hamburguer-icon, .separator)) {
  --spacing: var(--md);
  margin-block: var(--spacing);
}
body * :where(:not(h1, p, span)), .app * :where(:not(h1, p, span)), #root * :where(:not(h1, p, span)) {
  --txt: var(--text);
  color: var(--txt);
  border-radius: var(--roundness);
}

:where(a:not([role=img])) {
  --txt-color: var(--accent);
  width: fit-content;
  height: fit-content;
}
:where(a:not([role=img])):is(:visited, :link) {
  color: var(--txt-color);
}

:where(form) {
  --spacing: inherit;
  display: grid;
  place-items: center;
  justify-items: stretch;
  gap: var(--spacing);
  height: auto;
  width: var(--w-full);
}

:where(:focus-visible) {
  --outline: var(--outline-md);
  outline: var(--outline);
  outline-offset: var(--xs);
}

:where(:is(button, summary, li):not(.disabled):active) {
  filter: var(--effect-bright);
}

*,
*::before,
*::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

::selection {
  background-color: var(--accent);
  color: white;
}

html {
  font-size: 62.5%;
  line-height: 1.15;
}

body,
body * + * {
  box-sizing: border-box;
}

img,
video,
svg {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

details {
  --bg: var(--primary);
  --roundness: var(--xs);
  --spacing: var(--md);
  --outline: var(--outline-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing);
  margin-bottom: var(--spacing);
}
details summary {
  background-color: var(--bg);
  border-radius: var(--roundness);
  padding: var(--spacing);
  margin-bottom: var(--sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease, filter 0.145s ease-out;
}
details summary::after {
  content: "";
  display: block;
  align-self: center;
  background-image: var(--expand-icon); /* Use the provided icon URL */
  background-size: cover;
  background-position: center;
  aspect-ratio: 1/1;
  width: 1.5em;
}
details summary::after {
  rotate: -90deg;
  transition: rotate 0.4s var(--transition-out-back);
}
details summary:is(:focus, :hover) {
  filter: brightness(125%);
  cursor: pointer;
}
details summary:focus {
  outline-offset: 0.15rem;
  outline: var(--outline);
}
details summary:active {
  filter: var(--effect-bright);
}
details summary:is(::marker, ::-webkit-details-marker) {
  display: none;
}
details p {
  --bg: var(--muted-primary);
  background-color: var(--bg);
  padding: var(--spacing);
  border-radius: var(--roundness);
  transition: all 0.4s ease;
}
details[open] > summary::after {
  rotate: initial;
}

@keyframes margin-transition {
  0% {
    margin-bottom: 0;
  }
  100% {
    margin-bottom: var(--spacing);
  }
}
a[role=button] {
  color: var(--text-color);
}

:is(button, a[role=button]) {
  --width: 16em;
  --font-weight: 500;
  --spacing: var(--md) var(--lg);
  --_roundness: var(--roundness);
  text-align: center;
  font-weight: var(--font-weight);
  min-width: var(--width);
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  padding: var(--md) var(--lg);
  border-radius: var(--_roundness);
  transition: background-color var(--transition), transform var(--transition);
}
:is(button, a[role=button]):hover:not(.disabled) {
  transform: translateY(2%);
}
:is(button, a[role=button]):active:not(.disabled) {
  transform: translateY(6%);
  filter: brightness(115%);
}
:is(button, a[role=button]).cta, :is(button, a[role=button])[type=submit] {
  --bg: var(--accent);
  background-color: var(--bg);
  will-change: background-color, transform;
  border: 0.2rem var(--accent) solid;
}
:is(button, a[role=button]).cta:hover, :is(button, a[role=button])[type=submit]:hover {
  background-color: color-mix(in oklab, var(--bg), white 20%);
}
:is(button, a[role=button]).cta:active, :is(button, a[role=button])[type=submit]:active {
  background-color: color-mix(in oklab, var(--bg), white 10%);
}
:is(button, a[role=button]).secondary {
  --bg: var(--secondary);
  --_border: var(--border);
  background-color: var(--bg);
  border: var(--_border);
}
:is(button, a[role=button]).ghost {
  --bg: transparent;
  background-color: var(--bg);
  border: 0.2rem solid var(--accent);
  transition: transform var(--transition);
}
:is(button, a[role=button]).destructive {
  --bg: var(--destructive);
  background-color: var(--bg);
}
:is(button, a[role=button]).disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

form:invalid button[type=submit] {
  pointer-events: none;
  opacity: 60%;
  cursor: not-allowed;
}

article {
  --bg: var(--primary);
  background-color: var(--bg);
  width: calc(2vmin + 15vw);
  aspect-ratio: var(--_aspect);
  text-align: center;
  word-break: normal;
  text-wrap: wrap;
  gap: 0.2vmin;
  display: grid;
  place-items: center;
  overflow: hidden;
}
article.hero-card {
  --_background-url: url(https://animehunch.com/wp-content/uploads/2020/10/Malevolent-Shrine.jpg);
  --_background-size: cover;
  --_background-pos: center;
  --_background-repeat: no-repeat;
  --_aspect: 16 / 9;
  --bg: none;
  aspect-ratio: var(--_aspect);
  background-image: var(--_background-url);
  background-size: var(--_background-size, cover);
  background-position: var(--_background-pos, center);
  background-repeat: var(--_background-repeat, no-repeat);
  transition: background-size 4s var(--transition-out-back);
}
article:not(.hero-card) {
  --_aspect: 1.5 / 1.85;
}
article:not(.hero-card):has(> img:first-child) {
  padding-block-end: var(--spacing);
  align-content: start;
  gap: 0.4vmin;
}
article:not(.hero-card) > img:first-child {
  align-self: self-start;
  max-width: 100%;
  object-fit: cover;
  object-position: top;
  --roundness: 0;
}
article:not(.hero-card) > :is(h2, h3, h4, h5, h6) {
  --font-size: var(--font-size);
  font-size: var(--font-size);
}
article:not(.hero-card) > :is(p, span) {
  --font-size: var(--font-size);
  font-size: 1.2vmin;
}

details[role=listbox], details[role=list], select {
  --_border: var(--border-sm);
  --_font-size: var(--font-size);
  --_spacing-y: var(--md);
  --_spacing-x: var(--md);
  --_width: var(--w-full);
  cursor: pointer;
  font-size: var(--_font-size);
  padding-block: var(--_spacing-y);
  transition: outline 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
  width: var(--_width);
}

details[role=listbox] > ul,
details[role=list] > ul {
  --bg: var(--muted-primary);
  --border: var(--border-sm);
  --width: var(--w-full);
  --_spacing-y: var(--md);
  background-color: var(--bg);
  border: var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
}
details[role=listbox] > ul li, details[role=listbox] > ul > *,
details[role=list] > ul li,
details[role=list] > ul > * {
  text-transform: capitalize;
}
details[role=listbox] > ul li,
details[role=list] > ul li {
  --font-size: var(--md);
  --text-color: var(--content-text);
  --font-weight: 500;
  --bg: inherit;
  --_roudness: 0;
  display: flex;
  align-items: center; /* Align items vertically if needed */
  width: 100%;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--text-color);
  background-color: var(--bg);
  border-radius: var(--_roudness);
  padding: var(--spacing);
  transition: background-color 0.4s ease, color 0.2s ease-in-out, filter 0.2s ease-in;
}
details[role=listbox] > ul li:is(:hover, :focus, :focus-visible),
details[role=list] > ul li:is(:hover, :focus, :focus-visible) {
  --bg: var(--primary);
  --text-color: var(--text);
}
details[role=listbox] > ul li:has(> a:is(:focus, :focus-visible)),
details[role=list] > ul li:has(> a:is(:focus, :focus-visible)) {
  --bg: var(--primary);
  --border: var(--border);
}
details[role=listbox] > ul li:active,
details[role=list] > ul li:active {
  filter: var(--effect-bright);
}
details[role=listbox] > ul li > a,
details[role=list] > ul li > a {
  --spacing-y: var(--sm);
  --spacing-x: var(--md);
  color: inherit;
  box-sizing: border-box;
  flex: 1; /* Allow the anchor tag to take up all available space */
  min-width: 0; /* Ensure it can shrink if needed */
  align-self: stretch;
  margin-inline: var(--spacing-x);
  padding-block: var(--spacing-y);
  border-radius: var(--roundness);
}
details[role=listbox] > ul li > a:focus-visible,
details[role=list] > ul li > a:focus-visible {
  outline: none;
}

select {
  --text-color: var(--text);
  --font-weight: 500;
  appearance: none;
  padding-inline: var(--_spacing-x);
  text-transform: capitalize;
  background-image: var(--expand-icon);
  background-repeat: no-repeat;
  background-position: calc(100% - var(--font-size)) center;
  /* &::after {
      content: "";
      width: 30em;
      height: 30em;
      background-color: var(--select-arrow);
      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
      z-index: 2000;
  } */
}
select::-ms-expand {
  display: none;
}
select:is(:hover, :focus, :focus-visible) {
  --bg: var(--primary);
}
select:focus-visible {
  --outline: var(--outline);
  outline: var(--outline);
}
select::after {
  content: "";
  display: block;
  align-self: center;
  background-image: var(--expand-icon); /* Use the provided icon URL */
  background-size: cover;
  background-position: center;
  aspect-ratio: 1/1;
  width: 1.5em;
}
select::after {
  rotate: -90deg;
  transition: rotate 0.4s var(--transition-out-back);
  z-index: -200;
  background-color: khaki;
}
select, select > * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
select > option {
  --bg: var(--muted-primary);
  --border: var(--border-sm);
  --_text-color: var(--content-text);
  color: var(--text-color);
  background-color: var(--bg);
  border-radius: 0;
  padding: var(--spacing);
  cursor: pointer;
  transition: background-color 0.8s ease, filter 0.2s ease-in;
}
select > option:hover {
  --bg: var(--primary);
}
select > option:active {
  filter: var(--effect-bright);
}
select > option[selected] {
  background-color: var(--muted-primary);
}

.gallery {
  --_gallery-gap: 0.4rem;
  --_gallery-height: 72rem;
  --_gallery-width: clamp(
      50%,
      100%,
      80vmin
  );
  --_bg: transparent;
  background-color: var(--_bg);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  padding: 0;
  width: var(--_gallery-width);
  align-self: center;
  margin: var(--spacing) auto;
  gap: var(--_gallery-gap);
}
.gallery > figure {
  flex: 1;
  text-align: center;
  will-change: flex;
  transition: flex 0.666s ease;
}
.gallery > figure:hover {
  flex: 3;
}
.gallery > figure:hover > img {
  border-radius: var(--roundness);
}
.gallery > figure figcaption {
  opacity: 0;
  transition: opacity 1.44s ease-out;
}
.gallery > figure:hover figcaption {
  opacity: 1;
}
.gallery img {
  cursor: pointer;
  border-radius: 100vmax;
  width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1/8;
  height: clamp(64rem, var(--_gallery-height), 80vmax);
  transition: border-radius 0.4s var(--transition-out-circle);
}

.scroll-gallery {
  --_gallery-columns: 3;
  --_gallery-gap: .8rem;
  column-count: var(--_gallery-columns);
  gap: var(--_gallery-gap);
  width: var(--_gallery-width);
}
.scroll-gallery img {
  margin-bottom: 0;
  overflow: hidden;
  object-fit: contain;
  object-position: center;
  backface-visibility: hidden;
}

a.scroll-to-top {
  display: grid;
  place-items: center;
  text-align: center;
  position: sticky;
  padding: var(--spacing);
  bottom: 0;
  left: 90%;
  width: 5%;
  z-index: 20;
  aspect-ratio: 1/1;
  background-color: red;
  behavior: smooth;
  transform: translateY(200%);
}

div.hamburguer-icon {
  width: 8vmin;
  border-radius: 100vmax;
  padding: 0.4vmin;
  background-color: rebeccapurple;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  gap: 0.6vmin;
  align-items: center;
  justify-content: center;
}
div.hamburguer-icon span {
  background-color: var(--background);
  display: block;
  width: 80%;
  height: 0.6rem;
  backface-visibility: hidden;
}

input:focus {
  outline: var(--accent) 0.2rem solid;
}

div[role=separator] {
  --_separator-h: 100%;
  --_separotor-w: .1rem;
  --bg: var(--secondary);
  height: var(--_separator-h);
  width: var(--_separotor-w);
  background-color: var(--bg, var(--secondary));
}

.carousel {
  position: relative;
  max-width: 100%;
}
.carousel figure, .carousel .carousel__wrapper {
  display: flex;
  aspect-ratio: 16/9;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
  border-radius: 0.5rem;
  -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
  scrollbar-width: none; /* Hide scrollbar Firefox */
}
.carousel figure::-webkit-scrollbar, .carousel .carousel__wrapper::-webkit-scrollbar {
  display: none;
}
.carousel figure img, .carousel figure .carousel__img, .carousel .carousel__wrapper img, .carousel .carousel__wrapper .carousel__img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: cover;
}
.carousel nav, .carousel .carousel__nav {
  --bg: transparent;
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.carousel nav a, .carousel nav .carousel__link, .carousel .carousel__nav a, .carousel .carousel__nav .carousel__link {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.75;
  transition: opacity ease 250ms;
}
.carousel nav a:hover, .carousel nav .carousel__link:hover, .carousel .carousel__nav a:hover, .carousel .carousel__nav .carousel__link:hover {
  opacity: 1;
}

progress {
  --_width: var(--w-full);
  --_roundness: var(--round-full);
  --_border: var(--border);
  border: var(--_border);
  padding: 0.2rem;
  width: var(--_width);
}
progress::-webkit-progress-bar {
  --_bg: var(--accent);
  width: 25%;
  border-radius: calc(2px + var(--round-peal));
  background-color: var(--accent);
}

hr,
.separator {
  --_bg: var(--text);
  background-color: var(--_bg);
}

hr {
  --_bg: var(--text);
  margin-block: var(--lg);
  height: 2px;
}

.separator {
  border-left: 1px solid var(--_bg);
  height: clamp(1ch, 10rem, 100vmin);
  margin-inline: var(--lg);
  width: 2px;
  padding: 0;
  border-radius: 0;
}

:where(:root, html) {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-accent) var(--muted-background);
}

::-webkit-scrollbar {
  width: 1.6vmin;
  height: 1.6vmin;
}

::-webkit-scrollbar-thumb {
  background-color: var(--muted-accent);
  border-radius: var(--round-peal);
  cursor: pointer;
  border: 0.2em var(--muted-background) solid;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

/* ::-webkit-scrollbar-thumb:hover {

    background-color: red;
} */
::-webkit-scrollbar-track {
  background-color: var(--muted-background);
  border-radius: var(--round-peal);
  margin-block: 1vmin;
}

span.chip {
  --_spacing: var(--sm);
  --_height: 4.5ch;
  --_bg: var(--primary);
  height: fit-content;
  width: max-content;
  border-radius: var(--round-peal);
  background-color: var(--_bg);
  padding-inline-end: var(--md);
  padding-inline-start: var(--md);
  padding-block: var(--xs);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--_spacing);
  height: var(--_height);
  transition: background-color var(--transition-time-md) var(--transition-out-circle);
}
span.chip[data-excludable=true] {
  padding-inline-end: var(--sm);
}
span.chip[data-excludable=true]::after {
  content: "✕";
  background-color: var(--muted-primary);
  border-radius: inherit;
  height: 80%;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  display: grid;
  text-align: center;
  place-content: center;
  cursor: pointer;
  transition: color 0.2s var(--transition-out-circle);
}
span.chip[data-excludable=true]:active::after {
  color: var(--foreground-destructive);
}
span.chip:hover {
  --_bg: var(--foreground-primary);
}
span.chip:has(> :is(img, i, svg)) {
  padding-inline-start: var(--xs);
}
span.chip:first-child :is(img, i, svg) {
  border-radius: inherit;
  aspect-ratio: 1;
  width: 2em;
  object-fit: cover;
  object-position: center;
}

form:-moz-submit-invalid input:invalid {
  border: 0.2rem var(--destructive) solid;
  transition: border-color var(--transition);
}

input,
label,
textarea {
  --_spacing-y: var(--md);
  --_spacing-x: var(--lg);
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color var(--transition), filter var(--transition);
}

input,
textarea {
  padding-block: var(--_spacing-y);
  padding-inline: var(--_spacing-x);
  border: 0.2rem solid var(--primary);
}

textarea {
  background-color: var(--muted-primary);
  resize: none;
  font-family: var(--font-family);
  font-size: var(--font-size);
  outline: none;
  margin-block: var(--spacing);
}
textarea:hover {
  outline: none;
}
textarea:active {
  outline: none;
}
textarea:focus-visible {
  outline: var(--outline);
}

label,
label:not(:is([role=button],
[role=navigation])) {
  --spacing-y: var(--sm);
  --spacing-x: var(--md);
  --width: 100%;
  width: fit-content;
  height: fit-content;
  padding-block: var(--spacing-y);
}
label:has(> input[type=file]),
label:not(:is([role=button],
[role=navigation])):has(> input[type=file]) {
  --_width: var(--w-full, 100%);
  --_font-weight: 600;
  --_border-color: var(--content-text);
  --_bg: transparent;
  aspect-ratio: 1/0.5;
  background-color: var(--_bg);
  font-weight: var(--_font-weight);
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: break-word;
  border: 0.2rem dashed var(--_border-color);
  width: var(--_width);
  padding: var(--spacing-y) var(--spacing-x);
  text-align: center;
  position: relative;
  transition: background-color 0.8s ease, border-color 0.4s var(--transition-out-circle), filter 0.4s ease-in;
  --_effect-level: 125%;
}
label:has(> input[type=file]):hover,
label:not(:is([role=button],
[role=navigation])):has(> input[type=file]):hover {
  --_bg: var(--muted-accent);
  --_border-color: var(--text);
}
label:has(> input[type=file]):active,
label:not(:is([role=button],
[role=navigation])):has(> input[type=file]):active {
  filter: var(--effect-bright);
}
label:has(> input[type=file]:focus-visible),
label:not(:is([role=button],
[role=navigation])):has(> input[type=file]:focus-visible) {
  --outline: var(--outline-md);
  outline-offset: var(--outline-offset);
  outline: var(--outline);
}
label:has(> input[type=color]),
label:not(:is([role=button],
[role=navigation])):has(> input[type=color]) {
  display: flex;
  align-items: center;
}
input,
select {
  --roundness: var(--xs);
  --bg: var(--muted-primary);
  --_font-size: var(--font-size);
  --width: 100%;
  --_border-color: var(--muted-accent);
  font-weight: 500;
  font-size: var(--_font-size);
  border: 0.2rem solid var(--_border-color);
  background-color: var(--bg);
  border-radius: var(--roundness);
  outline: none;
  transition: all var(--transition);
  /* &:focus 

      border-color: var(--accent);
  } */
}
input::placeholder,
select::placeholder {
  --text-color: var(--muted-text);
  color: var(--text-color);
}
input:focus,
select:focus {
  --_border-color: var(--accent);
}
input:is([type=checkbox],
[type=color],
[type=date],
[type=radio],
[type=range]),
select:is([type=checkbox],
[type=color],
[type=date],
[type=radio],
[type=range]) {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--accent);
}
input[type=radio],
select[type=radio] {
  border-radius: 50%;
  padding: 0;
  margin: 0;
  width: 1.4em;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
input[type=radio]::after,
select[type=radio]::after {
  content: "";
  display: block;
  scale: 0;
  width: 60%;
  border-radius: inherit;
  aspect-ratio: inherit;
  background-color: var(--accent);
  transition: scale 0.2s var(--transition-out-circle);
}
input[type=radio]:checked::after,
select[type=radio]:checked::after {
  scale: 1;
}
input:is([type=checkbox],
[type=radio]),
select:is([type=checkbox],
[type=radio]) {
  --_spacing-x: var(--sm);
  --_spacing-y: var(--sm);
}
input[type=file],
select[type=file] {
  position: absolute;
  inset: 0;
  z-index: -20;
  opacity: 0;
}
input[type=file]:focus-visible,
select[type=file]:focus-visible {
  all: none;
}
input[type=color],
select[type=color] {
  --width: 2.4vmax;
  --bg: transparent;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  aspect-ratio: 1/1;
  width: max(var(--width), 2.4vmin);
  border-radius: var(--roundness);
  background-color: var(--bg, transparent);
  transition: border 0.2s ease;
}
input[type=color]::-webkit-color-swatch,
select[type=color]::-webkit-color-swatch {
  border-radius: var(--roundness);
  border: 0.1rem var(--blend-back-color) solid;
}
input[type=color]:is(:active, :focus)::-webkit-color-swatch,
select[type=color]:is(:active, :focus)::-webkit-color-swatch {
  border: 0.2rem var(--text) solid;
}
input[type=checkbox]:not([role=switch]),
select[type=checkbox]:not([role=switch]) {
  overflow: hidden;
  position: relative;
  width: 1.4em;
  height: 1.4em;
  aspect-ratio: 1;
}
input[type=checkbox]:not([role=switch]):checked::after,
select[type=checkbox]:not([role=switch]):checked::after {
  scale: 45%;
}
input[type=checkbox]:not([role=switch])::after,
select[type=checkbox]:not([role=switch])::after {
  content: "";
  --borderWidth: .6rem;
  --height: 2em;
  --width: 1em;
  --borderColor: var(--accent);
  position: absolute;
  inset: 0;
  transform: rotate(40deg) translate(-60%, -50%);
  height: var(--height);
  width: var(--width);
  scale: 0;
  border-bottom: var(--borderWidth) solid var(--borderColor);
  border-right: var(--borderWidth) solid var(--borderColor);
  transition: inherit;
}
input[type=date], input[type=time], input[type=datetime-local],
select[type=date],
select[type=time],
select[type=datetime-local] {
  --bg: var(--primary);
  --text-color: var(--text);
  --font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-align: center;
  vertical-align: center;
  background-color: var(--bg);
  color: var(--text-color);
  border: none;
  padding: 0.4vmin 0.8vmin;
  border-radius: var(--roundness);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  letter-spacing: 0.2ch;
}
input[type=date]:hover, input[type=time]:hover, input[type=datetime-local]:hover,
select[type=date]:hover,
select[type=time]:hover,
select[type=datetime-local]:hover {
  --bg: var(--accent);
}
input[type=date]:active, input[type=time]:active, input[type=datetime-local]:active,
select[type=date]:active,
select[type=time]:active,
select[type=datetime-local]:active {
  filter: brightness(125%);
}
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator,
select[type=date]::-webkit-calendar-picker-indicator,
select[type=time]::-webkit-calendar-picker-indicator,
select[type=datetime-local]::-webkit-calendar-picker-indicator {
  background-color: var(--secondary);
  padding: 0.6vmin 0.8vmin;
  border-radius: var(--roundness);
  align-self: center;
  margin-top: 2.4%;
  cursor: pointer;
}
input[type=range],
select[type=range] {
  --width: 100%;
  --bg: transparent;
  --roundness: 100vmax;
  --spacing: .4vmin;
  height: fit-content;
  padding: 0;
  width: var(--width); /* Corrected typo here */
  background-color: var(--bg, transparent);
  border-radius: var(--roundness);
  outline-offset: 0.2rem;
}
input:is([type=checkbox], [type=radio]):focus-visible,
select:is([type=checkbox], [type=radio]):focus-visible {
  --outline-offset: var(--outline-lg);
  outline-offset: var(--outline-offset);
  outline: var(--outline);
}
input[type=search],
select[type=search] {
  --spacing-x: var(--lg);
  --roundness: var(--round-peal);
  text-transform: capitalize;
  padding-inline: var(--spacing-x);
  position: relative;
  background-image: var(--search-icon);
  background-position: calc(100% - var(--spacing));
  background-repeat: no-repeat;
}

.logo {
  --roundness: 50%;
  border-radius: var(--roundness);
  width: 8vmin;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
}

video {
  aspect-ratio: 16/9;
}

dialog {
  position: fixed;
  inset: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
dialog[open] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.8rem);
}
dialog:focus {
  outline: unset;
}

label[role=button]:has(> input[type=checkbox]) input[type=checkbox] {
  display: none;
}

label[role=button]:has(> input[type=checkbox]:checked) {
  background-color: red;
}
label[role=button]:has(> input[type=checkbox]:checked) + [role=dialog] {
  display: grid;
}

label[role=button]:has(> input[type=checkbox]) + [role=dialog] {
  display: none;
  --_z-index: var(--index-popup);
  --_modal-top: 50%;
  --_modal-left: 50%;
  z-index: var(--_z-index);
  position: fixed;
  top: var(--_modal-top);
  left: var(--_modal-left);
  transform: translate(-50%, -50%);
}
label[role=button]:has(> input[type=checkbox]) + [role=dialog] [role=dialog] {
  position: fixed;
  --_modal-top: inherit;
  z-index: calc(var(--_z-index) - 5);
  top: var(--_modal-top);
}

html:has(label[role=button] > input[type=checkbox]:checked) {
  overflow-y: visible;
}

:is(dialog,
article[role=dialog],
article[role=dialog] article[role=dialog]) {
  --_modal-width: 50dvw;
  --_modal-height: 50dvh;
  --_spacing-y: var(--lg);
  --_spacing-x: var(--md);
  --_bg: var(--foreground-background);
  --_border: var(--border-md);
  --_text-align: start;
  width: var(--_modal-width, 50%);
  height: clamp(50%, var(--_modal-height), 100%);
  /*  padding-inline: var(--_spacing-x);
   padding-block: var(--_spacing-y); */
  overflow: hidden;
  border: var(--_border);
  background-color: var(--_bg);
}
:is(dialog,
article[role=dialog],
article[role=dialog] article[role=dialog]) > * {
  padding-inline: var(--_spacing-x);
}
:is(dialog,
article[role=dialog],
article[role=dialog] article[role=dialog]) > :is(header, footer) {
  border-radius: var(--roudness) 0;
}
:is(dialog,
article[role=dialog],
article[role=dialog] article[role=dialog]) > header {
  background-color: var(--secondary);
  padding-inline: var(--_spacing-x);
  padding-block: var(--_spacing-y);
}
:is(dialog,
article[role=dialog],
article[role=dialog] article[role=dialog]) > footer {
  --_spacing-y: var(--md);
  padding: var(--_spacing-y);
  background-color: var(--muted-secondary);
}

.modal-close {
  float: right;
  font-size: 2.4em;
  transition: color 0.1s ease-in;
}
.modal-close:hover {
  color: var(--light-destructive);
}

/* SWITCH COMPONENT */
/* Default Styling */
label:has(input[type=checkbox][role=switch],
input[type=checkbox][role=switch]) {
  --_switch-w: 4.4em;
  --_switch-h: 2.4em;
  --_switch-round: 100vmax;
  --_switch-default-bg: var(--muted-secondary);
  --_switch-focus-outline: var();
  --_switch-color: var(--foreground-secondary);
  --_switch-slider-color: whitesmoke;
  /* GLOBAL */
  --spacing: var(--md);
}

/* Hiding it to achieve the toggle effect */
input[type=checkbox][role=switch] {
  appearance: none;
  width: var(--_switch-w);
  height: var(--_switch-h);
  border-radius: var(--_switch-round);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--_switch-color);
  transition: transform 0.24s ease-in, opacity 0.4s ease-out, background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
input[type=checkbox][role=switch]::after {
  content: "";
  background-color: var(--_switch-slider-color);
  aspect-ratio: 1/1;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 5%;
  border-radius: 50%;
  transition: transform 0.24s ease-in, opacity 0.4s ease-out, background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Common styling between switches */
input[type=checkbox][role=switch] {
  width: var(--_switch-w);
}

input[type=checkbox][role=switch]:focus {
  outline: var(--accent) 0.2rem solid;
  outline-offset: 0.18rem;
}

/* Change Switch background when checked */
input[role=switch][type=checkbox]:checked {
  --_switch-color: var(--primary);
}

input[role=switch][type=checkbox]:checked:not(:is(.squished, .squared)) {
  background-color: var(--primary);
}
input[role=switch][type=checkbox]:checked:not(:is(.squished, .squared))::after {
  transform: translateX(120%);
}

/* SWITCH VARIATIONS */
/* Squished Variation */
input[type=checkbox][role=switch].squished {
  --_switch-h: .8em;
  height: var(--_switch-h);
  width: var(--_switch-w);
  border-radius: var(--_switch-round);
  background-color: var(--foreground-secondary);
  position: relative;
  overflow: visible;
  padding: 0;
}
input[type=checkbox][role=switch].squished::after {
  content: "";
  background-color: var(--_switch-slider-color);
  height: 250%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: -2.5%;
  transform: translateY(-50%);
  border-radius: inherit;
  transition: transform 0.24s ease-in, opacity 0.4s ease-out, background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Change Switch background when checked */
input[role=switch][type=checkbox].squished:checked {
  background-color: var(--primary);
}
input[role=switch][type=checkbox].squished:checked::after {
  transform: translate(252.5%, -50%);
}

/* Squared Variation */
input[type=checkbox][role=switch].squared {
  /* Add specific styles for squared variation */
  width: var(--_switch-w);
  height: var(--_switch-h);
  border-radius: 0;
  background-color: var(--foreground-secondary);
  position: relative;
}
input[type=checkbox][role=switch].squared::after {
  content: "";
  background-color: var(--_switch-slider-color);
  aspect-ratio: 1/1;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 5%;
  border-radius: 0;
  transition: transform 0.24s ease-in, opacity 0.4s ease-out, background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Change Switch background when checked */
input[role=switch][type=checkbox].squared:checked {
  background-color: var(--primary);
}
input[role=switch][type=checkbox].squared:checked::after {
  transform: translateX(120%);
}

body > footer {
  --_width: 100%;
  --_height: 35vmin;
  --_bg: var(--muted-background);
  --_txt: color-mix(in oklab, var(--text-color) 90%, black 10%);
  font-size: calc(10vw - var(--footer-size));
  background-color: var(--_bg);
  color: var(--_txt);
  align-self: flex-end;
  display: grid;
  padding-block: var(--3xl);
  padding-inline: var(--lg);
  place-items: center;
  width: var(--_width);
  height: clamp(var(--_height), auto, fit-content);
  border-top: 0.2rem solid var(--muted-accent);
  display: grid;
  place-items: center;
}
body > footer ul {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
}
body > footer ul li {
  font-size: calc(10vw - var(--footer-size));
}
body > footer ul a {
  color: var(--_txt);
}

body > :is(header, header.header-sticky) {
  --_widht: 100%;
  --_height: 16vmin;
  min-width: var(--_widht);
  height: clamp(12vmin, var(--_height), 8.44dvh);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--spacing);
  align-self: flex-start;
}
body > :is(header, header.header-sticky) a[role=img], body > :is(header, header.header-sticky) a:has(img.logo) {
  display: flex;
  align-items: center;
}
body > :is(header, header.header-sticky) a[role=img] :is(img, svg, em), body > :is(header, header.header-sticky) a:has(img.logo) :is(img, svg, em) {
  box-sizing: content-box;
  border: var(--primary) 0.4vmin solid;
}

body > header.header-sticky {
  --_header-top-position: 0;
  position: sticky;
  top: var(--_header-top-position, 0);
  z-index: 100;
}

:is(.hero-shade, .hero-blur, .hero-fade, .hero-gradient) {
  --_effect-intensity: unset;
  --_effect-color: unset;
  position: relative;
}

:is(div, section):is(.hero, .hero-shade, .hero-blur, .hero-fade, .hero-gradient) {
  --_bg-img-url: url(https://images.unsplash.com/photo-1528353518104-dbd48bee7bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1332&q=80);
  --_bg-img-size: cover;
  --_bg-img-repeat: no-repeat;
  --_bg-img-pos: center;
  --_hero-content-pos: center;
  --_bg: var(--background);
  display: grid;
  place-items: center;
  align-content: center;
  grid-auto-rows: min-content;
  justify-content: center;
  width: var(--w-full);
  height: var(--h-screen);
  background-color: var(--_bg);
  background-image: var(--_bg-img-url);
  background-size: var(--_bg-img-size);
  background-repeat: var(--_bg-img-repeat);
  background-position: var(--_bg-img-pos);
  text-align: center;
}
:is(div, section):is(.hero, .hero-shade, .hero-blur, .hero-fade, .hero-gradient) section {
  z-index: 1;
  /* display: grid;
  grid-template-columns: 10% repeat(4, 1fr) 10%; */
  width: min(50%, 50dvw);
  height: auto;
  margin-inline: auto;
  margin-block: 0;
}
:is(div, section):is(.hero, .hero-shade, .hero-blur, .hero-fade, .hero-gradient) section :is(h1, h2) {
  --_font-size: var(--lg);
  margin: 0;
  grid-column: 1/3;
}
:is(div, section):is(.hero, .hero-shade, .hero-blur, .hero-fade, .hero-gradient) section h1 {
  --_font-size: var(--lg);
  font-size: clamp(5rem, 1.25rem + 12vw, 8rem);
  color: var(--accent);
  --spacing: 0;
}
:is(div, section):is(.hero, .hero-shade, .hero-blur, .hero-fade, .hero-gradient) section h2 {
  --_spacing-y: var(--md);
  --_font-size: var(--md);
  font-size: clamp(1rem, -1.5rem + 8vw, 3rem);
  margin-block-end: var(--_spacing-y);
}
:is(div, section):is(.hero, .hero-shade, .hero-blur, .hero-fade, .hero-gradient) section p {
  font-size: clamp(0.8rem, 0.3rem + 1.6vw, 1.2rem);
  margin-block-end: var(--lg);
}
:is(div, section):is(.hero, .hero-shade, .hero-blur, .hero-fade, .hero-gradient) section button {
  --_spacing-y: var(--xs);
  margin-block-start: var(--_spacing-y);
}

:is(:is(div, section).hero-shade, :is(div, section).hero-gradient, :is(div, section).hero-blur)::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
:is(div, section).hero-shade {
  --_effect-intensity: 45%;
  --_effect-color: 0, 0, 0,;
}
:is(div, section).hero-shade::before {
  background-color: rgba(var(--_effect-color) var(--_effect-intensity));
}
:is(div, section).hero-blur {
  --_effect-intensity: var(--xs);
}
:is(div, section).hero-blur::before {
  backdrop-filter: blur(var(--_effect-intensity));
}
:is(div, section).hero-gradient {
  --_effect-intensity: 20%;
  --_effect-color: var(--background);
}
:is(div, section).hero-gradient::before {
  background-image: linear-gradient(to bottom, var(--_effect-color) var(--_effect-intensity), transparent);
}

body > main {
  --_width: var(--main-container-size);
  --_height: auto;
  --_spacing-y: var(--spacing-y);
  --_bg: inherit;
  width: clamp(20rem, var(--_width), 80dvw);
  height: var(--_height);
  border-radius: var(--roundness);
  margin-block: var(--_spacing-y);
  background-color: var(--_bg);
}

header > nav {
  --font-size: 1.75rem;
  --bg: auto;
  background-color: var(--bg);
  width: clamp(30vmin, 40rem, 45%);
}
header > nav * {
  transition: opacity var(--transition);
}
header > nav ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
header > nav ul li {
  width: fit-content;
  height: fit-content;
}
header > nav ul li a:not([role=button]) {
  font-size: clamp(1rem, 0.7rem + 0.96vw, 1.6rem);
  font-weight: 600;
}
header > nav ul li:is(:hover, :focus) a {
  opacity: 0.8;
}
header > nav ul li:active a {
  opacity: 0.6;
}

label[role=navigation] {
  all: unset;
  height: fit-content;
  width: fit-content;
  --_hamburguer-width: 3em;
  --_hamburguer-height: .3em;
  --_hamburguer-spacing: .4em;
  --_hamburguer-roundness: var(--roudness);
  display: flex;
  flex-direction: column;
  gap: var(--_hamburguer-spacing, var(--sm));
  cursor: pointer;
}
label[role=navigation]:has(> input[type=checkbox]:checked)::after {
  transform: translateY(-250%) rotate(-40deg);
}
label[role=navigation]:has(> input[type=checkbox]:checked)::before {
  transform: translateY(250%) rotate(40deg);
}
label[role=navigation]:has(> input[type=checkbox]:checked) + aside {
  --_navigation-display: flex;
}
label[role=navigation]:has(> input[type=checkbox]:not(:checked)) + aside {
  --_navigation-display: none;
}
label[role=navigation]:hover {
  --_hamburguer-spacing: .8em;
}
label[role=navigation]:hover::after, label[role=navigation]:hover::before, label[role=navigation]:hover > input[type=checkbox] {
  background-color: red;
}
label[role=navigation]::after, label[role=navigation]::before, label[role=navigation] > input[type=checkbox] {
  all: unset;
  --_hamburguer-roundness: var(--roundness);
  content: "";
  display: block;
  width: var(--_hamburguer-width, 6rem);
  height: var(--_hamburguer-height, 0.8rem);
  border-radius: var(--_hamburguer-roundness);
  background-color: var(--primary);
  transform-origin: center;
  transition: opacity 0.2s ease-in-out, rotate 0.4s var(--transition-middle-break), transform 0.4s var(--transition-out-circle);
}
label[role=navigation] > input[type=checkbox]:checked {
  opacity: 0;
}
label[role=navigation] > input[type=checkbox]::after {
  all: unset;
}
label[role=navigation] + aside {
  --_navigation-display: none;
  display: var(--_navigation-display, none);
}

nav[role=navigation].floating-nav {
  --_spacing-x: var(--sm);
  --_spacing-y: var(--md);
  border-radius: 0 var(--roundness) var(--roundness) 0;
  width: fit-content;
  padding-inline: var(--_spacing-x);
  padding-block: var(--_spacing-y);
  position: fixed;
  left: 0;
}
nav[role=navigation].floating-nav[data-orientation=right] {
  left: unset;
  right: 0;
}
nav[role=navigation].floating-nav ul {
  display: grid;
  gap: var(--sm);
}
nav[role=navigation].floating-nav li {
  --_spacing-y: var(--lg);
  --_spacing-x: var(--lg);
  --_border: var(--border);
  padding-block: var(--_spacing-y);
  padding-inline: var(--_spacing-x);
  border: var(--_border);
}

@media only screen and (max-width: 37.5em) {
  header nav ul {
    display: none;
    visibility: hidden;
  }
}
section {
  height: auto;
  padding-block: var(--hg);
}
section section {
  margin-block: var(--spacing-block);
}

/*  --text: #e8e8ed;
 --background: #09090c;
 --primary: #47465d;
 --secondary: #16161d;
 --accent: #6f6e91; */
:where(.row, .col) {
  --flex-spacing: 0;
  display: flex;
  gap: var(--flex-spacing);
  flex-wrap: wrap;
}

.row {
  flex-direction: row;
}

.col {
  flex-direction: column;
}

.flex-cluster, .flex-cluster-grow {
  display: flex;
  gap: var(--spacing);
  flex-wrap: wrap;
}

.flex-cluster-grow > * {
  flex: 1;
}

:where(.grid-dynamic, .grid-fixed) {
  --grid-cols: auto-fill;
  --grid-rows: min-content;
  --grid-item-width: 12rem;
  --grid-justify-items: center;
  --grid-min-cols: 1;
}

.grid-dynamic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-item-width), 100%), 1fr));
  grid-auto-rows: var(--grid-rows);
  justify-content: space-between;
  justify-items: var(--grid-justify-items);
  place-content: var(--grid-justify-items);
  gap: var(--spacing);
  height: auto;
  width: 100%;
}
.grid-dynamic > * {
  /* --bg: var(--foreground-secondary);

  background-color: var(--bg); */
  align-self: stretch;
  width: 100%;
}

.grid-fixed {
  --grid-cols: 2;
  --grid-rows: auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(min(var(--grid-item-width), 100%), 1fr));
  grid-template-rows: var(--grid-rows);
  justify-content: center;
  gap: var(--spacing);
}

.reel {
  --grid-auto-cols: 30%;
  display: grid;
  gap: var(--spacing);
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--grid-auto-cols) - var(--spacing) / 2);
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing);
}
.reel > * {
  scroll-snap-align: start;
}

:is(.big-bento, .small-bento, .bento) {
  display: grid;
  gap: var(--xs);
  grid-auto-rows: 1fr;
  aspect-ratio: 16/9;
}
:is(.big-bento, .small-bento, .bento) > * {
  margin: 0;
  align-self: stretch;
  background-color: var(--primary);
}
:is(.big-bento, .small-bento, .bento) > img {
  object-position: center;
  object-fit: cover;
}

.small-bento {
  grid-template-columns: repeat(3, 1fr);
}
.small-bento :nth-child(1) {
  grid-row: span 3;
}
.small-bento :is(:nth-child(2), :nth-child(3)) {
  grid-row: span 2;
  grid-column: span 2;
}
.small-bento :nth-child(4) {
  grid-column: span -1;
}

.bento {
  grid-template-columns: repeat(4, 1fr);
}
.bento :nth-child(1) {
  grid-row: span 2;
  grid-column: span 2;
}
.bento :is(:nth-child(2), :nth-child(3)) {
  grid-row: span 2;
}
.bento :is(:nth-child(5)) {
  grid-column: span 2;
}

.big-bento {
  grid-template-columns: repeat(7, 1fr);
}
.big-bento :is(:nth-child(1), :nth-child(3)) {
  grid-column: span 2;
}
.big-bento :nth-child(2) {
  grid-column: span 3;
}
.big-bento :is(:nth-child(4), :nth-child(5), :nth-child(7), :nth-child(8)) {
  grid-row: span 2;
}
.big-bento :nth-child(6) {
  grid-row: span 3;
  grid-column: span 3;
}
.big-bento :is(:nth-child(9), :nth-child(10)) {
  grid-column: span 2;
}

:where(.wrapper) {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.dotted-grid {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, rgba(128, 128, 128, 0.0705882353) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 128, 128, 0.0705882353) 1px, transparent 1px);
  background-size: 24px 2px;
  background-repeat: repeat;
}

/* This code simulates a family hierarchy, where the father/parent shares his attributes across the family tree.
   It aims to be a more flexible way to work with inheritance. */
:where(.parent) {
  --bg: currentColor;
  --text-color: currentColor;
  --spacing: var(--md);
  --font-size: var(--font-size);
  background-color: var(--bg);
}

:is(.heritage-all, [data-heritage=all]) {
  all: inherit;
}

:is(.heritage-appearence, [data-heritage=aspect]) {
  --roundness: inherit;
  aspect-ratio: inherit;
  border: inherit;
  outline: inherit;
}

:is(.heritage-typography, [data-heritage=typography]) {
  --_font-size: inherit;
  --_font-family: inherit;
  --_font-weigth: inherit;
  font: inherit;
}

:is(.heritage-spacing, [data-heritage=spacing]) {
  padding: inherit;
  margin: inherit;
  margin-block: inherit;
  margin-inline: inherit;
  padding-block: inherit;
  padding-inline: inherit;
}

:is(.heritage-colors, [data-heritage=colors]) {
  --_bg: inherit;
  --_text-color: inherit;
  accent-color: inherit;
  background-color: inherit;
  border-color: inherit;
  color: inherit;
  fill: inherit;
  outline-color: inherit;
  text-decoration-color: inherit;
}

/* Inherit colors */
:where(.parent.colors) {
  --bg: currentColor;
  --text-color: currentColor;
}

/* Inherit the spacing vars */
:where(.parent.sizes) {
  --spacing: var(--spacing);
}

/* Inherit the font variables */
:where(.parent.font) {
  --font-size: var(--font-size);
  --text-color: var(--text-color);
}

/* All children, no matter the nesting level */
/* All children, but only the direct ones */
.parent.direct-childs > *:not(.bastard) {
  background-color: inherit;
}

/* Only the first direct child */
.parent.first-child-only > :first-child:not(.bastard) {
  background-color: inherit;
}

/* All the first children, no matter the nesting level */
.parent.all-first-childs :first-child:not(.bastard) {
  background-color: inherit;
}

/* All the last children, no matter the nesting level */
.parent.all-last-childs :last-child:not(.bastard) {
  background-color: inherit;
}

/* Only the last direct child */
.parent.last-child-only > :last-child:not(.bastard) {
  background-color: inherit;
}

/* Odd children */
.parent.odd-children > *:nth-child(odd):not(.bastard) {
  background-color: inherit;
}

/* Even children */
.parent.even-children > *:nth-child(even):not(.bastard) {
  background-color: inherit;
}

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

.text-align-justify {
  text-align: justify;
}

.text-align-end {
  text-align: end;
}

.text-align-start {
  text-align: start;
}

/*# sourceMappingURL=yonaka.temps.css.map */