@font-face { font-family: custom; src: url("/ui/font.ttf") }



:root{
  --brand: #da3;
  --theme: var(--color, var(--brand));
  --theme_fff: light-dark(#fff, var(--color));
  --theme_000: light-dark(#000, var(--color));

  --theme_transparent: color-mix(in oklab, var(--theme), #0000 90%);
  --theme_transparent_fff: light-dark(#fff, var(--theme_transparent));
  --theme_transparent_333: light-dark( #333, var(--theme_transparent));

  --body: light-dark(#e0e0e0, #2c2c2c);
  --aside: light-dark(#bbb, #222);
  --elem: light-dark(#eee, #111);
  --base: light-dark(#fff, #000);

  --reverse: light-dark(#000, #fff);
  --color_000_222: light-dark(#000, #222);
  --color_111_ddd: light-dark(#111, #ddd);

  --btn_color: light-dark(#333, var(--theme));
  --btn_background: light-dark(#eee, color-mix(in oklab, var(--theme), #111 90%));
  --btn_fff_777: light-dark(#fff, #777);
  --btn_000_777: light-dark(#000, #777);
}



html {
  scrollbar-color: #111 black;
  scroll-behavior: smooth;
  body {
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--body);
    > div {
      > scroll {
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        overflow: auto hidden;
        max-height: var(--max_h, 100dvh);
        scrollbar-color: transparent transparent;
        > main {
          display: flex;
          flex-direction: column;
          min-width: 100%;
          &.blur {
            cursor: url("/ui/close.png") 2 2, pointer !important; }
          > footer {
            height: auto;
            color: #ccc;
            background: #000;
            margin-top: auto;} }

        > aside {
          position: relative;
          max-width: 450px;
          min-width: min(100%, 450px);
          background: var(--aside);
          &.left { border-right: 2px solid #000;}
          &.right { border-left: 2px solid #000;}
          > header { background: #000;} }

        > :is(aside, main){
          scrollbar-width: none;
          position: relative;
          scroll-snap-align: center;
          min-height: 100dvh;
          max-height: 100dvh;
          overflow: hidden auto;
          > header:first-of-type {
            min-height: 35px;
            max-height: 35px;
            padding: 5px;
            z-index: 80;
            color: #fff;
            button { color-scheme: light; } } } } } } }





html:has(:popover-open){
  -webkit-tap-highlight-color: transparent;
  &:has([popover="auto"]){
    cursor: url("/ui/close.png") 2 2, pointer; }
  body {
    background-image: url("/ui/noise.png") !important;
    background-size: unset !important;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    touch-action: none;
    filter: grayscale(1) opacity(0.3) blur(1em);
    overflow: hidden; } }
    [popover]:popover-open {
      border: 0 solid;
      overflow: hidden auto;
      scrollbar-width: none;
      scrollbar-color: transparent transparent;
      max-height: 100dvh;
      cursor: auto;
      pointer-events: all;
      box-sizing: border-box;
      background: transparent;
      padding: 0;
      position: fixed;
    @media (min-width: 601px) { /* Desktop */
      width: min(calc(100% - 1em), var(--w, 500px)) }
    @media (max-width: 600px) { /* Mobile */
      width: calc(100% - 1em) }
      &::backdrop {
        background: linear-gradient(16deg, #00faff42, #ff00d630) } }