:root {
  --tab-button-size: var(--normal-padding);
  --tab-button-area-size: var(--padding-40);
}
.widget {
    position: fixed;
    z-index: 98;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    transform: none;
    border: none;
  }
  .widget .description .container {
    padding: var(--article-padding) 0;
  }

 .mono .wave > span span {
  -webkit-text-stroke: var(--border-width) #29fc2e;
}
 .mono .wave > span strong {
  color: #29fc2e;
}
  .widget.fold,
  .widget.full {
    transition: all 0.45s;
  }
  .widget.custom {
    background: none;
    backdrop-filter:unset;
  }
  .widget.relative {
    position: relative;
    z-index: 9;
  }
  .widget.custom.left {
    left: var(--article-padding);
    right: calc(50% + var(--article-padding));
    top: var(--article-padding);
    bottom: var(--article-padding);
  }
  .widget.custom.right {
    left: calc(50% + var(--article-padding));
    right: var(--article-padding);
    top: calc(var(--article-padding) + var(--header-height));
    bottom: var(--article-padding);
  }
  .widget.custom.bottom {
    top: calc(50% + var(--header-height) / 2);
    bottom: var(--article-padding);
  }
  .widget.custom.top {
    top: var(--article-padding);
    bottom: calc(50% + var(--header-height) / 2);
  }
  @media screen and (min-width:801px) and (max-width:1280px) {
    .widget.custom.right {
      /* left: calc(33.333% + var(--article-padding)); */
    }
  }
  @media screen and (max-width:800px) {
    .widget.custom.left,
    .widget.custom.right {
      left: var(--article-padding);
      right: var(--article-padding);
    }
    .widget.custom.bottom-m {
      top: calc(50% + var(--header-height) / 2);
      bottom: var(--article-padding);
    }
    .widget.custom.top-m {
      top: var(--article-padding);
      bottom: calc(50% + var(--header-height) / 2);
    }
  }
  
  .widget > .contain {
    width: calc(100% - var(--article-padding) * 2);
    max-width: calc(var(--padding-100) * 7);
    /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */
    transition: all 0.3s;
  }
  .widget.mono:not(.fold):not(.relative) > .contain > .article {
    border: none;
  }
  .widget.mono:not(.fold) > .contain > .article > .contain {
    background-color: #000;
  }
  .widget.mono.relative > .contain > .article > .contain {
    background-color: #000;
  }
  .widget.custom .articleTitle {
    display: none;
  }
  .widget.mono .description {
    display: block;
    color: #29fc2e;
    width: 100%;
    white-space: pre-wrap;
  }
  .widget.custom:not(.fold) > .contain > .article,
  .widget.custom:not(.fold) > .contain > .article > *,
  .widget.custom:not(.fold) .description,
  .widget.custom:not(.fold) > .contain,
  .widget.full .description,
  .widget.full > .contain {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
  }
  .widget.full > .contain > .article,
  .widget.full > .contain > .article > * {
    height: 100%;
    border-radius: 0;
  }
  .widget.full {
    inset: 0 !important;
    z-index: 97;
  }
  .widget.fold:not(.relative) {
    left: 100% !important;
    top: calc(100% - var(--padding-10)) !important;
    z-index: 99;
    margin-top: calc(0px - var(--article-padding));
    width: calc(var(--padding-100) * 2.5);
    right: auto !important;
    bottom: auto !important;
    background-color: transparent;
    backdrop-filter: unset;
  }
  .widget.fold.relative {
    transform: none !important;
  }
  .widget.fold {
    transform: translate(-100%, -200%);
  }
  .widget.fold ~ .widget.fold {
    transform: translate(-100%, -300%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold {
    transform: translate(-100%, -400%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    transform: translate(-100%, -500%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    transform: translate(-100%, -600%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    transform: translate(-100%, -700%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    transform: translate(-100%, -800%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    transform: translate(-100%, -900%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    transform: translate(-100%, -1000%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 96;
    transform: translate(-100%, -1005%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 95;
    transform: translate(-100%, -1010%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 94;
    transform: translate(-100%, -1015%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 93;
    transform: translate(-100%, -1020%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 92;
    transform: translate(-100%, -1025%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 91;
    transform: translate(-100%, -1030%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 90;
    transform: translate(-100%, -1035%);
  }
  .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold ~ .widget.fold {
    z-index: 89;
    transform: translate(-100%, -1040%);
  }
  .widget.fold > .contain {
    position: static;
    transform: none;
  }
  /* .widget:not(.fold):not(.life) .foldView, */
  .widget.fold:not(.relative) .widgetTab ~ * {
    display: none;
  }
  .widget.fold:not(.relative) .article .contain {
    padding: 0;
  }
  .widget.fold:not(.relative) .widgetTab {
    position: static;
  }
  .widget .contain > .article {
    max-height: calc(100vh - var(--article-padding) * 2);
    max-height: calc(100dvh - var(--article-padding) * 2);
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
  }
  .widget.fold .contain > .article {
    background-color: var(--white-color-05);
    color: var(--color-05);
  }
  .widget.fold .contain > .article .foldView {
    cursor: pointer;
  }
  .widget.full .contain > .article {
    max-height: 100%;
  }
  .widget .contain > .article > .contain {
    max-height: 100%;
    overflow: auto;
  }
  .widget:not(.fold) .contain > .article {
    padding-top: var(--tab-button-area-size);
  }
  .widget.relative .contain {
    width: 100%;
    min-width: 100%;
  }
  .widget.relative .contain > .article {
    padding-top: var(--tab-button-area-size);
  }
  .widget .description {
    width: 100%;
    max-height: 42rem;
    /* overflow: auto; */
    padding: 2px 0;
  }
  .widget.dialog .article .description,
  .widget.filter .article .description {
    padding: 0;
  }
  .widget.dialog .article .description a,
  .widget.filter .article .description a {
    border-radius: 0;
    border-width: 0 0 var(--border-width) 0;
    font-size: var(--font-17);
  }
  .widget.dialog .article .description,
  .widget.filter .article .description {
    border: var(--border);
    border-radius: var(--padding-8);
  }
  .widget.dialog .article .description a:last-of-type,
  .widget.filter .article .description a:last-of-type {
    border-bottom: none;
  }
  
  .widgetTab {
    background-color: var(--color-primary-01);
    display: flex;
    align-items: center;
    /* gap: var(--padding-10); */
    min-height: var(--tab-button-area-size);
    padding: var(--padding-7) var(--article-padding);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
  }
  .widgetTab > button {
    height: calc(var(--padding-10) + var(--tab-button-size));
    padding-right: var(--padding-10);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .widgetTab .tabButton {
    border-radius: 100px;
    width: var(--tab-button-size);
    height: var(--tab-button-size);
    font-size: var(--tab-button-size);
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border);
  }
  .widgetTab .tabButton:not(:hover) {
    opacity: 0.8;
  }
  .widget.full .widgetTab .fold,
  .widget.fold .widgetTab .fold,
  .widget.fold .widgetTab .full,
  .widgetTab .disabled {
    pointer-events: none;
  }
  .widget.fold .widgetTab .fold,
  .widget.fold .widgetTab .full {
    display: none;
  }
  .widget.relative .widgetTab .tabButton,
  .widget.fold .widgetTab .full .tabButton,
  .widget.fold .widgetTab .fold .tabButton,
  .widget.full .widgetTab .fold .tabButton,
  .widgetTab .disabled .tabButton {
    background-color: #ccc !important;
    pointer-events: none;
  }
  .widget.relative .widgetTab .tabButton .tabIcon,
  .widget.fold .widgetTab .fold .tabButton .tabIcon,
  .widget.fold .widgetTab .full .tabButton .tabIcon,
  .widget.full .widgetTab .fold .tabButton .tabIcon,
  .widgetTab .disabled .tabButton .tabIcon {
    display: none;
  }
  .widgetTab .tabButton .tabIcon {
    width: 50%;
    height: 50%;
    color: #000;
  }
  @media screen and (min-width:801px) {
    .widgetTab > button:not(:hover) .tabButton .tabIcon {
      display: none;
    }
  }
  

  @media screen and (max-width:800px) {
    :root {
      --tab-button-area-size: var(--padding-44);
      --tab-button-size: var(--padding-22);
    }
  }