/* src/style.css */
@layer reset, element, component, modifier, layout;
@layer reset {
  html {
    box-sizing: border-box;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
    margin: 0;
  }
  :is(h1, h2, h3, h4, h5, h6),
  :is(p, blockquote, pre, address) {
    overflow-wrap: break-word;
  }
  :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }
  :is(p, blockquote, pre, address) {
    text-wrap: pretty;
  }
  :is(ul, ol, menu, dir),
  :is(input, textarea, select, button, fieldset, legend, label, output, progress, meter) {
    margin: 0;
    padding: 0;
  }
  :is(ul, ol, menu, dir)[role=list] {
    list-style: none;
  }
  :is(input, textarea, select, button, fieldset, legend, label, output, progress, meter) {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 1rem;
    border: none;
    color: currentColor;
  }
  :is(img, picture, video, canvas, svg, audio, iframe, embed, object) {
    block-size: auto;
    max-inline-size: 100%;
  }
}
@supports not (color: rgb(from red r g b / calc(alpha - .5))) {
  :root {
    --color-text-inverted: black;
    --color-solid: hsl(0 0% 100% / 5%);
    --color-flat: hsl(0 0% 100% / 2.5%);
    --color-outline: hsl(0 0% 100% / 10%);
  }
  .glow.hot.flat {
    --glow-color-from: hsl(36 98% 59% / var(--glow-alpha));
    --glow-color-to: hsl(10 82% 55% / var(--glow-alpha));
  }
  .shine {
    --shine-color: hsl(0 0% 100% / .7) ;
  }
  .glare {
    box-shadow: 0 .4em 3em .4em hsl(223 85% 64% / 40%);
  }
  .glare.hot {
    box-shadow: 0 .4em 3em .4em hsl(36 98% 59% / 40%);
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .2s;
}
:root {
  --safe-area-block-start: 0px;
  --safe-area-block-end: 0px;
  --safe-area-inline-start: 0px;
  --safe-area-inline-end: 0px;
  --safe-area-block: calc(100vh - var(--safe-area-block-start) - var(--safe-area-block-end));
  --safe-area-inline: calc(100vw - var(--safe-area-inline-start) - var(--safe-area-inline-end));
  --color-accent: hsl(205 100% 50%);
  --color-success: hsla(149 66% 48%);
  --color-error: hsla(0 82% 55%);
  --color-warning: hsl(53 93% 64%);
  --color-text: white;
  --color-text-minor: hsl(233 4% 63%);
  --color-text-inverted: color(from var(--color-text) srgb calc(1 - r) calc(1 - g) calc(1 - b));
  --color-background: hsl(243 28% 13%);
  --color-solid: color(from var(--color-text) srgb r g b / 5%);
  --color-flat: color(from var(--color-solid) srgb r g b / calc(alpha / 2));
  --color-outline: color(from var(--color-solid) srgb r g b / calc(alpha * 2));
  --font-small: .75rem;
  --font-h5: .875em;
  --border-round: calc(infinity * 1em);
  --gap: var(--font-small);
}
html {
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  overscroll-behavior: none;
  line-height: 1.25;
  text-wrap: balance;
  text-size-adjust: none;
  font-smoothing: antialiased;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: var(--color-text);
  accent-color: var(--color-accent);
  background: var(--color-background);
}
body {
  overflow-y: auto;
  overscroll-behavior: none;
  scroll-behavior: smooth;
  display: grid;
  grid: [main] 1fr [nav] auto / 100%;
  block-size: 100dvh;
  padding-block-start: var(--safe-area-block-start);
  padding-inline: var(--safe-area-inline-start) var(--safe-area-inline-end);
}
body:has(:modal, *:state(modal)) {
  overflow: hidden;
}
main {
  display: grid;
  padding-block-end: calc(4.5em + var(--safe-area-block-end));
}
:is(h1, h2, h3, h4, h5, h6),
b {
  font-weight: 500;
}
:is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.25;
}
h1 {
  font-size: 1.75rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.125rem;
}
h4 {
  font-size: 1rem;
}
h5 {
  font-size: .875rem;
}
h6 {
  font-size: .75rem;
}
@layer element {
  progress {
    --progress-color: var(--color-accent);
    block-size: .8em;
    inline-size: auto;
    background: none !important;
    border-radius: var(--border-round);
  }
  progress::-webkit-progress-bar {
    border-radius: 1em;
    background: var(--color-solid);
  }
  progress::-webkit-progress-value {
    border-radius: inherit;
    background: var(--progress-color) !important;
  }
}
@layer modifier {
  progress.glow {
    --progress-color: var(--glow-gradient) ;
  }
}
@layer element {
  input {
    background: none;
  }
}
@layer element {
  :is(ul, ol, menu, dir) {
    display: grid;
    gap: var(--gap, var(--font-small));
    list-style: none;
  }
  :is(ul, ol, menu, dir) > li {
    display: flex;
    align-items: center;
    gap: .5em;
  }
}
@layer element {
  ol {
    counter-reset: ol;
  }
  ol > li::before {
    counter-increment: ol;
    content: counter(ol);
    font-size: .875em;
    display: grid inline;
    place-content: center;
    aspect-ratio: 1;
    line-height: 1;
    block-size: 2em;
    border-radius: 50%;
    background: var(--color-solid);
  }
}
#navbar {
  --gap: 1.25em;
  z-index: 1;
  position: fixed;
  inset-block-end: 0;
  inline-size: 100%;
  display: flex;
  place-content: space-around;
  gap: 0;
  padding: var(--gap);
  padding-block-end: calc(var(--gap) + var(--safe-area-block-end, 0px));
  font-size: var(--font-small);
  color: var(--color-text-minor);
  background: hsl(243 28% 13% / 40%);
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  border-block-start: solid 1px var(--color-outline);
  view-transition-name: navbar;
}
#navbar a {
  display: grid;
  place-items: center;
  gap: .5em;
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}
#navbar #home {
  aspect-ratio: 1;
  padding: 0;
  inline-size: 4.5em;
  margin: -.5em -1em;
  border-radius: 12px;
  color: var(--color-accent);
  background: var(--color-solid);
  place-content: center;
}
#navbar {
  --gap: 1.25em;
  z-index: 1;
  position: fixed;
  inset-block-end: 0;
  inline-size: 100%;
  display: flex;
  place-content: space-around;
  gap: 0;
  padding: var(--gap);
  padding-block-end: calc(var(--gap) + var(--safe-area-block-end, 0px));
  font-size: var(--font-small);
  color: var(--color-text-minor);
  background: hsl(243 28% 13% / 40%);
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  border-block-start: solid 1px var(--color-outline);
  view-transition-name: navbar;
}
#navbar a {
  display: grid;
  place-items: center;
  gap: .5em;
  color: inherit;
  -webkit-text-decoration: none;
  -webkit-text-decoration: none;
  text-decoration: none;
}
#navbar #home {
  aspect-ratio: 1;
  padding: 0;
  inline-size: 4.5em;
  margin: -.5em -1em;
  border-radius: 12px;
  color: var(--color-accent);
  background: var(--color-solid);
  place-content: center;
}
@scope (#navbar) {
  :scope {
    --gap: 1.25em;
    z-index: 1;
    position: fixed;
    inset-block-end: 0;
    inline-size: 100%;
    display: flex;
    place-content: space-around;
    gap: 0;
    padding: var(--gap);
    padding-block-end: calc(var(--gap) + var(--safe-area-block-end, 0px));
    font-size: var(--font-small);
    color: var(--color-text-minor);
    background: hsl(243 28% 13% / 40%);
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    border-block-start: solid 1px var(--color-outline);
    view-transition-name: navbar;
  }
  a {
    display: grid;
    place-items: center;
    gap: .5em;
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  #home {
    aspect-ratio: 1;
    padding: 0;
    inline-size: 4.5em;
    margin: -.5em -1em;
    border-radius: 12px;
    color: var(--color-accent);
    background: var(--color-solid);
    place-content: center;
  }
}
@layer element {
  .icon {
    display: inline-block;
    aspect-ratio: 1;
    block-size: 1em;
    font-size: 1.5em;
  }
}
tc-root svg {
  block-size: auto !important;
}