/* src/style.css */
@layer reset, element, component, component.modifier, layout, modifier;
:root {
  --gap: 1rem;
  --color-accent: hsl(158 100% 44%);
  --color-rise: var(--color-accent);
  --color-fall: hsla(352 91% 62%);
  --color-success: var(--color-accent);
  --color-error: hsl(349 82% 50%);
  --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) rgb(19 21 26);
  --color-background: var(--csstools-light-dark-toggle--0, Canvas);
  --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) white;
  --color-text: var(--csstools-light-dark-toggle--1, black);
  --color-text: CanvasText;
  --color-text-minor: rgb(from var(--color-text) r g b / .5);
  --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) rgb(from var(--color-text) r g b / 3%);
  --color-solid: var(--csstools-light-dark-toggle--2, rgb(from var(--color-text) r g b / 5%));
  --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) rgb(31 35 41);
  --color-outline: var(--csstools-light-dark-toggle--3, var(--color-solid));
  --font-xx-small: .5rem;
  --font-x-small: .75rem;
  --font-small: .875rem;
  --font-medium: 1rem;
  --font-large: 1.25rem;
  --font-x-large: 1.5rem;
  --font-xx-large: 2.25rem;
  --font-xxx-large: 2.75rem;
  --font-huge: 3rem;
  --font-x-huge: 3.25rem;
  --font-xx-huge: 4rem;
  --font-smaller: .875em;
  --font-larger: 1.125em;
  --border-radius: .5rem;
  --border-round: calc(infinity * 1em);
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
  :root {
    --color-background: light-dark( Canvas, rgb(19 21 26) );
  }
}
@supports (color: light-dark(red, red)) {
  :root {
    --color-text: light-dark(black, white);
  }
}
@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) and (color: light-dark(red, red)) {
  :root {
    --color-solid: light-dark( rgb(from var(--color-text) r g b / 5%), rgb(from var(--color-text) r g b / 3%) );
  }
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
  :root {
    --color-outline: light-dark( var(--color-solid), rgb(31 35 41) );
  }
}
@supports not (color: light-dark(tan, tan)) {
  :root * {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) rgb(19 21 26);
    --color-background: var(--csstools-light-dark-toggle--0, Canvas);
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) white;
    --color-text: var(--csstools-light-dark-toggle--1, black);
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) rgb(from var(--color-text) r g b / 3%);
    --color-solid: var(--csstools-light-dark-toggle--2, rgb(from var(--color-text) r g b / 5%));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) rgb(31 35 41);
    --color-outline: var(--csstools-light-dark-toggle--3, var(--color-solid));
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in-y {
  from {
    translate: 0 -1em;
  }
  to {
    translate: 0 0;
  }
}
@keyframes slide-out-y {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -1em;
  }
}
@keyframes slide-in {
  from {
    translate: var(--slide-in-x-from, 0) var(--slide-in-y-from, 1em);
  }
  to {
    translate: var(--slide-in-x-to, 0) var(--slide-in-y-to, 0);
  }
}
@keyframes slide-out {
  from {
    translate: var(--slide-out-x-from, 0) var(--slide-out-y-from, 0);
  }
  to {
    translate: var(--slide-out-x-to, 0) var(--slide-out-y-to, 1em);
  }
}
@keyframes scale-in {
  from {
    scale: 1.05;
  }
  to {
    scale: 1;
  }
}
@keyframes scale-out {
  from {
    scale: 1;
  }
  to {
    scale: .9;
  }
}
@layer reset {
  :root {
    --gap: 1rem;
    --color-accent: hsl(158 100% 44%);
    --color-rise: var(--color-accent);
    --color-fall: hsla(352 91% 62%);
    --color-success: var(--color-accent);
    --color-error: hsl(349 82% 50%);
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) rgb(19 21 26);
    --color-background: var(--csstools-light-dark-toggle--4, Canvas);
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) white;
    --color-text: var(--csstools-light-dark-toggle--5, black);
    --color-text: CanvasText;
    --color-text-minor: rgb(from var(--color-text) r g b / .5);
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgb(from var(--color-text) r g b / 3%);
    --color-solid: var(--csstools-light-dark-toggle--6, rgb(from var(--color-text) r g b / 5%));
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) rgb(31 35 41);
    --color-outline: var(--csstools-light-dark-toggle--7, var(--color-solid));
    --font-xx-small: .5rem;
    --font-x-small: .75rem;
    --font-small: .875rem;
    --font-medium: 1rem;
    --font-large: 1.25rem;
    --font-x-large: 1.5rem;
    --font-xx-large: 2.25rem;
    --font-xxx-large: 2.75rem;
    --font-huge: 3rem;
    --font-x-huge: 3.25rem;
    --font-xx-huge: 4rem;
    --font-smaller: .875em;
    --font-larger: 1.125em;
    --border-radius: .5rem;
    --border-round: calc(infinity * 1em);
  }
  @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
    :root {
      --color-background: light-dark( Canvas, rgb(19 21 26) );
    }
  }
  @supports (color: light-dark(red, red)) {
    :root {
      --color-text: light-dark(black, white);
    }
  }
  @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) and (color: light-dark(red, red)) {
    :root {
      --color-solid: light-dark( rgb(from var(--color-text) r g b / 5%), rgb(from var(--color-text) r g b / 3%) );
    }
  }
  @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
    :root {
      --color-outline: light-dark( var(--color-solid), rgb(31 35 41) );
    }
  }
  @supports not (color: light-dark(tan, tan)) {
    :root * {
      --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) rgb(19 21 26);
      --color-background: var(--csstools-light-dark-toggle--4, Canvas);
      --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) white;
      --color-text: var(--csstools-light-dark-toggle--5, black);
      --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgb(from var(--color-text) r g b / 3%);
      --color-solid: var(--csstools-light-dark-toggle--6, rgb(from var(--color-text) r g b / 5%));
      --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) rgb(31 35 41);
      --color-outline: var(--csstools-light-dark-toggle--7, var(--color-solid));
    }
  }
}
@layer reset {
  *,
  *::before,
  *::after {
    color: inherit;
    box-sizing: border-box;
    margin: 0;
  }
  button {
    cursor: pointer;
  }
  :where(:is(h1, h2, h3, h4, h5, h6), :is(p, blockquote, pre, address)) {
    overflow-wrap: break-word;
  }
  :where(:is(h1, h2, h3, h4, h5, h6)) {
    text-wrap: balance;
  }
  :where(:is(p, blockquote, pre, address)) {
    text-wrap: pretty;
  }
  :where(a) {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  :where(:is(ul, ol, menu, dir)[role=list]) {
    list-style: none;
  }
  :where(:is(ul, ol, menu, dir), :is(input, textarea, select, button, fieldset, legend, label, output, progress, meter)) {
    margin: 0;
    padding: 0;
  }
  :where(a, button, [role=button], input) {
    touch-action: manipulation;
  }
  :where(: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;
  }
  :where(:is(img, picture, video, canvas, svg, audio, iframe, embed, object)) {
    max-inline-size: 100%;
    object-fit: contain;
  }
}
@layer modifier {
  :root {
    --gap: 1rem;
    --color-accent: hsl(158 100% 44%);
    --color-rise: var(--color-accent);
    --color-fall: hsla(352 91% 62%);
    --color-success: var(--color-accent);
    --color-error: hsl(349 82% 50%);
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) rgb(19 21 26);
    --color-background: var(--csstools-light-dark-toggle--8, Canvas);
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) white;
    --color-text: var(--csstools-light-dark-toggle--9, black);
    --color-text: CanvasText;
    --color-text-minor: rgb(from var(--color-text) r g b / .5);
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) rgb(from var(--color-text) r g b / 3%);
    --color-solid: var(--csstools-light-dark-toggle--10, rgb(from var(--color-text) r g b / 5%));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) rgb(31 35 41);
    --color-outline: var(--csstools-light-dark-toggle--11, var(--color-solid));
    --font-xx-small: .5rem;
    --font-x-small: .75rem;
    --font-small: .875rem;
    --font-medium: 1rem;
    --font-large: 1.25rem;
    --font-x-large: 1.5rem;
    --font-xx-large: 2.25rem;
    --font-xxx-large: 2.75rem;
    --font-huge: 3rem;
    --font-x-huge: 3.25rem;
    --font-xx-huge: 4rem;
    --font-smaller: .875em;
    --font-larger: 1.125em;
    --border-radius: .5rem;
    --border-round: calc(infinity * 1em);
  }
  @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
    :root {
      --color-background: light-dark( Canvas, rgb(19 21 26) );
    }
  }
  @supports (color: light-dark(red, red)) {
    :root {
      --color-text: light-dark(black, white);
    }
  }
  @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) and (color: light-dark(red, red)) {
    :root {
      --color-solid: light-dark( rgb(from var(--color-text) r g b / 5%), rgb(from var(--color-text) r g b / 3%) );
    }
  }
  @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
    :root {
      --color-outline: light-dark( var(--color-solid), rgb(31 35 41) );
    }
  }
  @supports not (color: light-dark(tan, tan)) {
    :root * {
      --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) rgb(19 21 26);
      --color-background: var(--csstools-light-dark-toggle--8, Canvas);
      --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) white;
      --color-text: var(--csstools-light-dark-toggle--9, black);
      --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) rgb(from var(--color-text) r g b / 3%);
      --color-solid: var(--csstools-light-dark-toggle--10, rgb(from var(--color-text) r g b / 5%));
      --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) rgb(31 35 41);
      --color-outline: var(--csstools-light-dark-toggle--11, var(--color-solid));
    }
  }
}
@layer modifier {
}
@layer modifier {
  .smaller {
    font-size: var(--font-smaller);
  }
  .larger {
    font-size: var(--font-larger);
  }
  .text {
    white-space: pre-line;
  }
  .thin {
    font-weight: 300;
  }
  .success {
    color: var(--color-success);
  }
  .error {
    color: var(--color-error);
  }
  .rise {
    --color: var(--color-rise) ;
  }
  .fall {
    --color: var(--color-fall) ;
  }
  .outlined {
    --border-width: 1px;
    border: var(--border-width, 1px) solid var(--color-outline);
    background-size: calc(100% + var(--border-width));
  }
  :where(.solid) {
    --background: var(--color-solid);
    padding: var(--gap);
    border-radius: var(--font-x-small, .825rem);
    background: var(--background);
  }
  .transparent:where(.solid) {
    background: transparent;
  }
  .glass {
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    background: hsl(from var(--background) h s l / var(--clarity, alpha));
  }
  .glow:not(:hover) {
    --glow-power-active: 0 !important;
  }
  @media (--animated) {
    .glow {
      transition: box-shadow .3s ease;
    }
  }
  .glow {
    --glow-text-color: currentColor;
    --glow-text-power: var(--glow-power, .5);
    --glow-text: rgb( from var(--glow-text-color) r g b / calc(var(--glow-text-power) + var(--glow-power-active)) );
    text-shadow: 0 0 1.5em var(--glow-text);
  }
  :where(.solid, button, [role=button]).glow {
    --glow-power-active: .1;
  }
  .glow:where(.solid, button, [role=button]):not(:hover) {
    --glow-power-active: 0 !important;
  }
  @media (--animated) {
    :where(.solid, button, [role=button]).glow {
      transition: box-shadow .3s ease;
    }
  }
  :where(.solid, button, [role=button]).glow {
    --glow: rgb( from var(--glow-color, var(--background, currentColor)) r g b / calc(var(--glow-power, .1) + var(--glow-power-active)) );
    box-shadow: 0 0 4rem var(--glow);
  }
  :where(.accent) {
    color: var(--color-accent);
  }
  :where(.minor) {
    color: var(--color-text-minor);
  }
  :where(.clamped) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-rows, 2);
  }
  :where(.clipped) {
    max-inline-size: calc(2ch + var(--chars, 10) * 1ch);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  :where(.center) {
    text-align: center;
    place-items: center;
    place-content: center;
  }
  :where(.round) {
    border-radius: var(--border-round);
  }
  :where(.rounded) {
    border-radius: var(--border-radius);
  }
  :where(.lifted) {
    box-shadow: -2px 4px 14px 0 hsl(0 0 0 / 25%);
  }
  [delta] {
    --delta-color: currentColor;
  }
  [delta]::before {
    --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 9"><path d="M4.01951 1.31786L0.736315 6.18478C0.184599 7.00279 0.652309 8.24799 1.51137 8.24799H8.47976C9.33878 8.24799 9.80652 7.00186 9.25475 6.18478L5.97158 1.31786C5.46253 0.563557 4.52855 0.563557 4.01951 1.31786Z"/></svg>');
    content: "";
    display: inline-block;
    aspect-ratio: 1;
    block-size: .8em;
    margin-inline-end: .5em;
    vertical-align: middle;
    background: var(--delta-color);
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
  }
  [delta][delta=up] {
    --delta-color: var(--color-success) ;
  }
  [delta][delta=down] {
    --delta-color: var(--color-error);
  }
  [delta][delta=down]::before {
    rotate: 180deg;
  }
  @layer layout {
    :where(.stack) {
      display: grid;
      gap: .25rem var(--font-small);
      align-items: center;
      align-content: center;
    }
    :where(.stack):has(> :where(.prefix, .suffix)) {
      grid: auto / [prefix] auto [content] 1fr [suffix] auto;
    }
    :where(.stack):has(> :where(.prefix, .suffix)) > * {
      grid-column: content;
    }
    :where(.stack):has(> :where(.prefix, .suffix)) > .prefix {
      grid-area: 1 / prefix / span 2;
      text-align: start;
    }
    :where(.stack):has(> :where(.prefix, .suffix)) > .suffix {
      grid-area: 1 / suffix / span 2;
      text-align: end;
    }
    @scope (:where(.row)) {
      :scope {
        display: flex;
        align-items: center;
        gap: .5em;
      }
      .wide {
        flex: 1;
      }
    }
    [role=list],
    .list {
      display: grid;
      align-content: baseline;
      gap: var(--font-small);
    }
    .scrollport {
      --rest: calc((100vw - 100%) / 2);
      overflow: auto;
      scrollbar-width: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
* {
  transition-property:
    background-color,
    border-color,
    box-shadow,
    opacity;
  transition-duration: .3s;
}
html {
  overscroll-behavior: none;
  line-height: 1.25;
  text-wrap: balance;
  text-size-adjust: none;
  font-synthesis: none;
  font-smoothing: antialiased;
  color: var(--color-text);
  accent-color: var(--color-accent);
  background: var(--color-background);
}
body {
  scroll-behavior: smooth;
}
main {
  display: grid;
  padding: 1rem;
  min-block-size: calc(100vh - 4em);
}
html:has([popover]:popover-open),
html:has(dialog:modal) {
  overflow: hidden;
}
body > header {
  z-index: 3;
  position: sticky;
  inset-block-start: 0;
}
:is(h1, h2, h3, h4, h5, h6),
b {
  font-weight: 500;
}
h1,
.xx-large {
  font-size: var(--font-xx-large);
}
h2,
.x-large {
  font-size: var(--font-x-large);
}
h3,
.large {
  font-size: var(--font-large);
}
h4,
.medium {
  font-size: var(--font-medium);
}
h5 {
  font-size: var(--font-small);
}
h6,
small,
.small {
  font-size: var(--font-x-small);
}
hr {
  display: block;
  block-size: 1px;
  inline-size: 100%;
  margin: 1em 0;
  border: none;
  background: var(--color-outline, var(--color-text));
}
@property --bg-power-l { initial-value: -50%; inherits: false; syntax: "<percentage>"; }
@property --bg-power-r { initial-value: 60%; inherits: false; syntax: "<percentage>"; }
@keyframes bg {
  from {
    --bg-power-l: -50%;
    --bg-power-r: 50% ;
  }
  to {
    --bg-power-l: 0%;
    --bg-power-r: 80% ;
  }
}
[disabled] {
  opacity: .5;
  pointer-events: none;
}
.asset-list {
  padding: var(--gap);
  border-radius: var(--font-x-small, .825rem);
}
.asset-list table {
  --color-outline: transparent ;
}