:root{--svgCircle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23000' stroke-width='.3'/%3E%3C/svg%3E");--svgHome:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");--svgVline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='999' fill='none'%3E%3Cpath stroke='%23000' stroke-dasharray='10%2C5' d='M0 999V0'/%3E%3C/svg%3E");--svgSliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 8h12M3 16h12'/%3E%3Ccircle cx='5.5' cy='8' r='3.5'/%3E%3Ccircle cx='18.5' cy='16' r='3.5'/%3E%3C/svg%3E");--svgFile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 48 48'%3E%3Cpath d='M10 44h28a2 2 0 0 0 2-2V14L30 4H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2'/%3E%3Cpath d='M30 4v10h10M16 24h16m-16 8h16M16 16h4'/%3E%3C/svg%3E");--svgX:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M16.34 9.322a1 1 0 1 0-1.364-1.463l-2.926 2.728L9.322 7.66A1 1 0 0 0 7.86 9.024l2.728 2.926-2.927 2.728a1 1 0 1 0 1.364 1.462l2.926-2.727 2.728 2.926a1 1 0 1 0 1.462-1.363l-2.727-2.926z'/%3E%3Cpath fill-rule='evenodd' d='M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11 9a9 9 0 1 1 0-18 9 9 0 0 1 0 18' clip-rule='evenodd'/%3E%3C/svg%3E");--svgCircleplus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20'/%3E%3Cpath d='M24 14v20M14 24h20'/%3E%3C/svg%3E");--svgHline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='999' height='1'%3E%3Cpath stroke='%23000' stroke-dasharray='10%2C5' d='M0 0h999'/%3E%3C/svg%3E");--svgBolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='4' viewBox='0 0 48 48'%3E%3Cpath d='M19 4h18L26 18h15L17 44l5-19H8z'/%3E%3C/svg%3E");--svgPlus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linejoin='round' viewBox='-2 -2 24 24'%3E%3Cpath d='M11 3a2 2 0 0 0-2 2v4H5a2 2 0 0 0 0 4h4v4a2 2 0 0 0 4 0v-4h4a2 2 0 0 0 0-4h-4V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");--svgXs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23000' d='M10 2.5c-4.125 0-7.5 3.375-7.5 7.5s3.375 7.5 7.5 7.5 7.5-3.375 7.5-7.5-3.375-7.5-7.5-7.5m3.125 9.75c.25.25.25.625 0 .875a.604.604 0 0 1-.875 0L10 10.875l-2.25 2.25a.604.604 0 0 1-.875 0 .604.604 0 0 1 0-.875L9.125 10l-2.25-2.25a.604.604 0 0 1 0-.875c.25-.25.625-.25.875 0L10 9.125l2.25-2.25c.25-.25.625-.25.875 0s.25.625 0 .875L10.875 10z'/%3E%3C/g%3E%3C/svg%3E");--svgXcom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linejoin='round' viewBox='-5 -5 32 32'%3E%3Cpath d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.59l5.24 6.93zm-1.29 19.49h2.04L6.49 3.24H4.3z'/%3E%3C/svg%3E");--svgBub:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M8 0H0c2.5 0 5 3.5 8 12z'/%3E%3C/svg%3E");--svgRefresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 1024 1024'%3E%3Cpath d='M410.055 461.028H262.286l.051-.46a252.6 252.6 0 0 1 38.331-91.087 257.6 257.6 0 0 1 112.14-92.311c15.393-6.525 31.45-11.52 47.812-14.833a258.8 258.8 0 0 1 102.862 0 253.74 253.74 0 0 1 128.706 69.373l72.177-71.973a358.6 358.6 0 0 0-113.363-76.51 353 353 0 0 0-67.029-20.796 360.8 360.8 0 0 0-143.691 0 354 354 0 0 0-67.08 20.848 358.85 358.85 0 0 0-156.995 129.164 355.7 355.7 0 0 0-53.725 127.686c-1.427 6.881-2.192 13.915-3.211 20.899H2.276l203.89 203.89zm203.89 101.944h147.769l-.051.408a253.64 253.64 0 0 1-107.195 159.952 252 252 0 0 1-91.088 38.331 258.6 258.6 0 0 1-102.811 0 252.6 252.6 0 0 1-91.088-38.331 258.5 258.5 0 0 1-37.72-31.093l-72.075 72.075A358.4 358.4 0 0 0 373.1 840.772a350.6 350.6 0 0 0 67.029 20.797 360.4 360.4 0 0 0 143.64 0 358.4 358.4 0 0 0 224.024-150.114 355.5 355.5 0 0 0 53.674-127.584c1.376-6.881 2.192-13.915 3.211-20.899h157.046l-203.89-203.89-203.89 203.89z'/%3E%3C/svg%3E");--svgWait:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' preserveAspectRatio='xMidYMid' style='shape-rendering:geometricPrecision' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='0' fill='none' stroke='%23000' stroke-width='2'%3E%3Canimate attributeName='r' begin='0s' calcMode='spline' dur='1s' keySplines='0 0.2 0.8 1' keyTimes='0;1' repeatCount='indefinite' values='0;40'/%3E%3Canimate attributeName='opacity' begin='0s' calcMode='spline' dur='1s' keySplines='0.2 0 0.8 1' keyTimes='0;1' repeatCount='indefinite' values='1;0'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='0' fill='none' stroke='%23333' stroke-width='2'%3E%3Canimate attributeName='r' begin='-0.5s' calcMode='spline' dur='1s' keySplines='0 0.2 0.8 1' keyTimes='0;1' repeatCount='indefinite' values='0;40'/%3E%3Canimate attributeName='opacity' begin='-0.5s' calcMode='spline' dur='3s' keySplines='0.2 0 0.8 1' keyTimes='0;1' repeatCount='indefinite' values='1;0'/%3E%3C/circle%3E%3C/svg%3E");--svgSmile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20'/%3E%3Cpath d='M31 18v1m-14-1v1m14 12s-2 4-7 4-7-4-7-4'/%3E%3C/svg%3E");--svgSend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");--svgScroll:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linejoin='round' stroke-width='2' d='M12 2 6 8h4v8H6l6 6 6-6h-4V8h4z'/%3E%3C/svg%3E") 10 10, ns-resize;--svgFacebook:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");--svgAttachment:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 48 48'%3E%3Cpath d='m36.63 16.63-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");--svgStar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='.7' viewBox='-2 -2 24 24'%3E%3Cpath d='m11 2.5 2.3 5 5.7.7-4.1 3.8 1 5.7-4.9-2.9-5 2.9L7 12 3 8.2l5.7-.7z'/%3E%3C/svg%3E");--svgGrab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' fill='none'%3E%3Cpath fill='rgba(255%2C255%2C255%2C0.7)' fill-rule='evenodd' d='M3.573 2.036c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.69a1.9 1.9 0 0 1 .916-.056c.313.064.642.287.765.5.362.622.368 1.898.385 1.83.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.25.05.586.344.677.487.22.344.342 1.316.38 1.658.015.141.073-.393.292-.736.406-.639 1.844-.763 1.898.64.026.653.02.623.02 1.063 0 .516-.012.828-.04 1.202-.03.4-.116 1.304-.24 1.742-.087.301-.372.978-.654 1.384 0 0-1.074 1.25-1.19 1.812-.118.563-.079.567-.103.965-.023.4.121.923.121.923s-.8.104-1.234.034c-.39-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.01-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.92c-.283-.36-1.002-.93-1.243-1.986C.875 6.46.896 6 1.125 5.625c.232-.38.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.16.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.36-.4-.943-.38-1.526.008-.22.103-.77.832-1.042' clip-rule='evenodd'/%3E%3Cpath stroke='rgba(0%2C0%2C0%2C0.55)' stroke-linejoin='round' stroke-width='.75' d='M3.573 2.036c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.69a1.9 1.9 0 0 1 .916-.056c.313.064.642.287.765.5.362.622.368 1.898.385 1.83.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.25.05.586.344.677.487.22.344.342 1.316.38 1.658.015.141.073-.393.292-.736.406-.639 1.844-.763 1.898.64.026.653.02.623.02 1.063 0 .516-.012.828-.04 1.202-.03.4-.116 1.304-.24 1.742-.087.301-.372.978-.654 1.384 0 0-1.074 1.25-1.19 1.812-.118.563-.079.567-.103.965-.023.4.121.923.121.923s-.8.104-1.234.034c-.39-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.01-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.92c-.283-.36-1.002-.93-1.243-1.986C.875 6.46.896 6 1.125 5.625c.232-.38.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.16.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.36-.4-.943-.38-1.526.008-.22.103-.77.832-1.042Z' clip-rule='evenodd'/%3E%3Cpath stroke='rgba(0%2C0%2C0%2C0.55)' stroke-linecap='round' stroke-width='.75' d='M10.566 9.734V6.275M8.55 9.746l-.015-3.473m-1.98.032.02 3.426'/%3E%3C/svg%3E") 8 7, grabbing;--svgLinkedin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6M2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E")}
.toast {
  align-items: center;
  animation-duration: 0.5s;
  background: rgba(0,0,0,0.7);
  border-radius: 14px;
  bottom: 14px;
  box-shadow: 0 0 1px #85da1a inset;
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: bold;
  left: 14px;
  line-height: 1.4;
  overflow: visible;
  padding: 7px 14px;
  position: fixed;
  text-align: center;
  transition: 0.5s all;
  z-index: 99999;
  .ERR {
    background: rgba(255,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 3px #f00 inset;
    color: #fff;
    font-weight: normal;
    &>.x {
      background-image: var(--svgX);
      filter: invert(42%) sepia(1) saturate(15);
      &:hover {
        filter: invert(10%) sepia(1) saturate(47);
      }
    }
  }
  &>.x {
    background: var(--svgX)0 0/cover no-repeat;
    cursor: pointer;
    display: block;
    height: 18px;
    margin-left: 0.5em;
    position: absolute;
    right: -26px;
    user-select: none;
    width: 18px;
    &:hover {
      filter: invert(42%) sepia(1) saturate(47);
    }
  }
  &>div {
    max-height: 600px;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

dialog.uBox {
  border: 0.5em solid #f2f2f2;
  cursor: auto;
  max-width: 500px;
  min-width: 310px;
  outline: none;
  overflow: visible;
  padding: 0;
  position: relative;
  top: 16px;
  a, button {
    cursor: pointer;
  }
  &::backdrop {
    background: rgba(0,0,0,0.6);
  }
  &>div {
    box-sizing: border-box;
    overflow: auto;
    &>h1 {
      text-align: center;
    }
  }
  &:before {
    border: 1px solid #ccc;
    box-shadow: 0 0 0.25em #eee;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  &>b.w {
    margin: 96px auto;
  }
  &>a.x {
    background: var(--svgX)0 0/cover no-repeat;
    border: 2px solid transparent;
    border-radius: 50%;
    bottom: -48px;
    cursor: pointer;
    display: flex;
    filter: invert(100%);
    height: 1.5em;
    left: 50%;
    margin-left: -1em;
    position: absolute;
    width: 1.5em;
    z-index: 2;
    &:hover {
      background-image: var(--svgXs);
      border-color: #000;
      font-weight: bold;
    }
  }
}

v-scroll {
  display: block;
  height: 100%;
  &::part(scroll) {
    position: relative;
    display: flex;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  &::part(bar) {
    bottom: 0;
    display: none;
    height: 100%;
    left: 100%;
    margin-left: -13px;
    position: sticky;
    top: 0;
    user-select: none;
    width: 13px;
    z-index: 999;
    transition: all 0.2s,opacity 1s,box-shadow 1s;
    --si-bg:  rgba(125,125,125,0.6);
    --si-anim:  none;
  }
  &::part(turned) {
    display: block;
  }
  &::part(bar):hover, &::part(drag) {
    width: 21px;
    background: rgba(0,0,0,0.05);
    opacity: 1;
    cursor: var(--svgScroll);
    box-shadow: inset 3px 0 3px -3px rgba(0,0,0,0.3),inset -3px 0 3px -3px rgba(0,0,0,0.05);
    --si-bg:  rgba(125,125,125,0.8);
    --si-anim:  v-scroll-pop 0.4s ease-out;
  }
  &::part(si) {
    background: var(--si-bg);
    border-radius: 3px;
    display: block;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    width: 7px;
    cursor: var(--svgScroll);
    transition: all 0.2s,opacity 1s,box-shadow 1s;
    animation: var(--si-anim);
  }
}

body.drag {
  cursor: var(--svgGrab);
  v-scroll {
    &::part(scroll) {
      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}

@-moz-keyframes v-scroll-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes v-scroll-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@-o-keyframes v-scroll-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes v-scroll-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

:root {
  --cPrimary1:  #5b9fe6;
  --cPrimary2:  #3a7bd5;
  --cPrimary3:  #2463b0;
  --cBtnBg:  linear-gradient(135deg, var(--cPrimary1) 0%, var(--cPrimary2) 50%, var(--cPrimary3) 100%);
  --cText:  #2d3748;
  --cTextMuted:  #718096;
  --cTextDark:  #1a202c;
  --cPlaceholder:  #b0bec5;
  --cInputBg:  #fff;
  --cBgMain:  #eef1f5;
  --cBgMuted:  #f0f2f5;
  --cShine:  rgba(255,255,255,0.4);
  --cInsetLight:  rgba(255,255,255,0.2);
  --cInsetDark:  rgba(0,0,0,0.8);
  --cShadowLight:  rgba(0,0,0,0.06);
  --cShadowMain:  rgba(0,0,0,0.1);
  --cBubbleSelfBg:  linear-gradient(135deg, #fef9e7 0%, #fdeaa8 100%);
  --cBubbleSelfArrow:  #fdeaa8;
  --cBubbleSelfText:  #4a3c1f;
  --cBubbleOtherBg:  #fff;
  --cBubbleOtherText:  #2d3748;
  --cTimeBg:  #e2e8f0;
  --cTimeText:  #a0aec0;
  --cTabActiveBg:  var(--cPrimary2);
  --cTabActiveText:  #fff;
  --cTabHoverBg:  #f7fafc;
  --cTabDefaultText:  #718096;
  --padX:  1rem;
  --szBtn:  1.75rem;
  --radiusCard:  20px;
}

.a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-image: var(--svgCircle);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 1px rgba(0,0,0,0.1) inset;
  transition: background-image 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
  &:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;
    opacity: 1;
  }
  &:active {
    box-shadow: 0 0 10px rgba(0,0,0,0.3) inset;
    opacity: 0.9;
    transform: scale(0.88);
  }
}

blockquote.M {
  text-shadow: 1px -1px 0#eee;
  --c: #fe0;
  background: linear-gradient(#fff,color-mix(in lch,var(--c) 10%,#fffff9));
  border-radius: 8px;
  border: 2px solid var(--c);
  box-shadow: 0 0 3px inset color-mix(in lch,var(--c),#666);
  color: #000;
  font-weight: 500;
  margin: 1.5rem auto;
  padding: .5rem 1.5rem;
  strong {
    font-weight: 800;
  }
  &>ul {
    margin-left: 1.5rem;
    &>li {
      &:before {
        margin-left: -1.3rem;
      }
    }
  }
  &:before {
    opacity: 1;
  }
  &:after {
    display: none;
  }
  &:before {
    background: var(--svgTIP)0 0/cover repeat-y;
    content: "";
    height: 32px;
    left: -14px;
    position: absolute;
    top: -14px;
    width: 32px;
  }
}

blockquote.WARN {
  &:before {
    background-image: var(--svgWARN);
  }
  color: #e60;
  --c:  #f70;
}

blockquote.NOTE {
  &:before {
    background-image: var(--svgNOTE);
  }
  color: #060;
  --c:  #97cf4e;
}

blockquote.M {
  &+blockquote.M {
    margin-top: 1.5rem;
  }
}

button {
  background-image: var(--btnBg);
  background-size: 200%auto;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) inset;
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: h;
  font-size: 1em;
  font-weight: 700;
  line-height: 18px;
  padding: 16px;
  text-align: center;
  touch-action: manipulation;
  transition: all 0.6s;
  user-select: none;
  &:hover {
    background-position: right center;
    color: #fff;
  }
}

p {
  button {
    background-image: linear-gradient(45deg,#129 0,#06f 40%,#00f 100%);
    border-radius: 16px;
    display: inline-block;
    font-family: "h";
    font-size: 16px;
    line-height: 1.6;
    margin: 2px 0;
    padding: 7px 14px;
    vertical-align: 2px;
  }
}

button {
  &:active, &:focus-visible {
    box-shadow: 0 0 5px #000 inset;
    outline: 0;
  }
  &:active {
    transform: scale(0.95);
  }
  [disabled] {
    box-shadow: 0 0 2em #000 inset;
    cursor: not-allowed;
    filter: grayscale(100%);
    opacity: 0.4;
  }
}

input[type=checkbox] {
  appearance: none;
  border: 1px solid currentColor;
  color: currentColor;
  cursor: pointer;
  display: grid;
  flex-shrink: 0;
  font: inherit;
  height: 1.15em;
  margin: 0;
  margin-top: 0;
  padding: 0;
  place-content: center;
  position: relative;
  transform: scale(0.9);
  width: 1.15em;
  &+label {
    cursor: pointer;
    white-space: nowrap;
  }
  &::before {
    background-color: #999;
    bottom: 50%;
    clip-path: polygon(4% 34%,45% 76%,97% 2%,96% 23%,46% 95%,4% 54%);
    content: "";
    display: inline-block;
    height: 0.65em;
    margin-bottom: -0.325em;
    margin-right: -0.325em;
    position: absolute;
    right: 50%;
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    width: 0.65em;
    z-index: 1;
  }
  &:checked {
    &::before {
      transform: scale(1);
    }
  }
  &:hover {
    border-color: hover-color;
    color: hover-color;
    &+label {
      color: hover-color;
    }
  }
  &:focus {
    color: hover-color;
    &+label {
      color: hover-color;
    }
    &:checked {
      background: hover-color;
      &:before {
        background: #fff;
      }
    }
  }
  &:checked {
    &:hover {
      background-color: checked-color;
      border-color: checked-color;
      color: checked-color;
      &::before {
        background-color: #fff;
      }
      &+label {
        color: checked-color;
      }
    }
  }
  &:disabled {
    , &:hover {
      background: #f9f9f9;
      border-color: #999;
      cursor: not-allowed;
    }
    &:checked {
      &:hover {
        &::before {
          background-color: #999;
        }
      }
    }
  }
}

details, summary, summary:before {
  box-shadow: 0 0 3px inset #ccc;
}

details {
  background: linear-gradient(0,#f9f9f9,#fff);
  border: 1px solid #ccc;
  border-bottom: 0;
  margin-bottom: 1rem;
  &>ol, &>ul {
    margin: 0.5rem 1rem 0.5rem 3rem;
  }
  &>ol p, &>ul p {
    margin-left: 0;
  }
  &>p, &>h1, &>h2, &>h3, &>h4, &>h5, &>h6 {
    margin: 0.5rem 1rem;
  }
  &>summary {
    background: linear-gradient(0,#fcfcfc,#fff);
    border-bottom: 1px solid #ccc;
    box-shadow: 0 0 5px inset #eee;
    cursor: s-resize;
    display: block;
    display: flex;
    list-style-type: none;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
    &>p {
      margin: 0.5rem 3rem 0.5rem 1rem;
    }
    &:before {
      background: linear-gradient(0,#f3f3f3,#fff);
      background: var(--svgNabla) 50% 60%/12px no-repeat;
      border-left: 1px solid #ccc;
      bottom: 0;
      box-shadow-color: #f9f9f9;
      box-sizing: border-box;
      content: "";
      display: block;
      opacity: 0.5;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity 0.2s;
      width: 2.5rem;
    }
    &:hover {
      background: linear-gradient(0,#f0f0f0,#fff);
      box-shadow: 0 0 5px inset #ccc;
      &:before {
        opacity: 1;
      }
    }
  }
  [open] {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5rem;
    &>summary {
      cursor: n-resize;
      margin-bottom: 1rem;
      &:before {
        background-position: 50% 55%;
        border-left: 0;
        border-right: 1px solid #ccc;
        transform: rotate(180deg);
      }
    }
  }
}

.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  .fadeInLeft {
    animation-name: fadeInLeft;
  }
  .fadeOutLeft {
    animation-name: fadeOutLeft;
  }
}

@-moz-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-webkit-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-o-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-o-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-moz-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@-o-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  .fadeInLeft {
    animation-name: fadeInLeft;
  }
  .fadeOutLeft {
    animation-name: fadeOutLeft;
  }
}

@-moz-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-webkit-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-o-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-o-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-moz-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@-o-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

.ing {
  position: relative;
  &:before {
    animation-duration: 1s;
    animation-name: fadeIn;
    background: var(--svgWait) 50% 50%/64px no-repeat rgba(255,255,255,0.6);
    bottom: 0;
    content: "";
    cursor: wait;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
  }
}

form {
  flex-direction: column;
  position: relative;
  &>u {
    align-self: normal;
    display: block;
    margin: 0 0 24px;
    position: relative;
    text-decoration: none;
    .E {
      &>input {
        border-color: #c00;
        color: #c00;
      }
      &>label {
        color: #c00;
      }
      &>b {
        color: #f00;
        display: block;
        font-size: 14px;
        font-weight: 400;
        margin: 8px 0 0 16px;
      }
      input {
        &:is([type=text],form>u.E [type=password]) {
          &:hover {
            border-color: #f00;
            color: #f00;
            &+label {
              color: #f00;
            }
          }
          &:focus {
            background-color: rgba(255,0,0,0.02);
            border-color: #e50;
            color: #e50;
            &+label {
              box-shadow: 0 0 3px rgba(255,0,0,0.5) inset;
              color: #e50;
            }
          }
        }
      }
    }
  }
}

.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  .fadeInLeft {
    animation-name: fadeInLeft;
  }
  .fadeOutLeft {
    animation-name: fadeOutLeft;
  }
}

@-moz-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-webkit-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-o-keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes fadeIn {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-o-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@-moz-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@-o-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
}

.ing {
  position: relative;
  &:before {
    animation-duration: 1s;
    animation-name: fadeIn;
    background: var(--svgWait) 50% 50%/64px no-repeat rgba(255,255,255,0.6);
    bottom: 0;
    content: "";
    cursor: wait;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
  }
}

input {
  &:is([type=text],[type=password],[type=email]) {
    border: 1px solid #ccc;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 21px;
    outline: 0;
    padding: 16px;
    width: 100%;
    &:autofill {
      background-clip: text;
      -webkit-background-clip: text;
    }
    &+label {
      background: #fff;
      border-radius: 12px;
      color: #999;
      font-weight: 200;
      left: 10px;
      line-height: 24px;
      padding: 3px 7px;
      position: absolute;
      top: -16px;
      transition: all 0.3s;
      user-select: none;
    }
    &:focus {
      border-color: focus-color;
      color: #000;
      &+label {
        color: focus-color;
      }
    }
    &:hover {
      border-color: hover-color;
      &+label {
        color: hover-color;
      }
    }
    &:disabled {
      background: #f9f9f9;
      color: #999;
      display: inline-block;
      position: relative;
      user-select: none;
      &+label {
        background: #fcfcfc;
        box-shadow: 0 0 3px #ddd inset;
        color: #999;
        font-size: 14px;
        padding: 2px 10px;
        top: -15px;
      }
    }
    &::placeholder {
      opacity: 0.8;
      user-select: none;
    }
    &:disabled {
      &:hover {
        border: 1px solid #ccc;
      }
    }
    &:placeholder-shown {
      &+label {
        background: transparent;
        color: #999;
        cursor: text;
        left: 10px;
        pointer-events: none;
        top: 13px;
      }
    }
  }
}

@layer {
  html, body, input, textarea, b {
    background: transparent;
    font: 400 18px/1.875 t,sans-serif;
    font-variation-settings: "wght"330;
    text-rendering: geometricPrecision;
  }
  ul>li:first-child, ol>li:first-child {
    margin-top: 0;
  }
  li, ul, ol {
    margin: 0;
    padding: 0;
    position: relative;
  }
  ol {
    counter-reset: index;
    list-style: none;
    &>li {
      display: table;
      &:before {
        content: counters(index,".",decimal)".";
        counter-increment: index;
        display: table-cell;
        padding-right: 1rem;
        white-space: nowrap;
      }
    }
  }
  ol+ol, ol+ul, ul+ol, ul+ul {
    margin-top: 1rem;
  }
  li {
    &>ul {
      margin-left: 1.6rem;
    }
  }
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 29px;
  }
  h3 {
    font-size: 26px;
  }
  h4 {
    font-size: 23px;
  }
  h5 {
    font-size: 20px;
  }
  h6 {
    font-size: 18px;
  }
  p>b, p>strong, th {
    font-weight: 800;
  }
  video {
    max-width: 100%;
  }
  u {
    text-decoration: underline;
    text-decoration-color: #666;
    text-decoration-style: double;
    text-decoration-thickness: from-font;
    text-underline-offset: 9px;
  }
  a {
    color: #03a;
    text-decoration: none;
    transition: color 0.3s,border 0.3s,font-weight 0.3s;
    &:hover {
      color: #00f;
      text-shadow: 0 0 1px #66c;
    }
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    word-spacing: 1px;
  }
  html {
    &:lang(ar) p, &:lang(ckb) p, &:lang(dv) p, &:lang(fa) p, &:lang(he) p, &:lang(ps) p, &:lang(sd) p, &:lang(ug) p, &:lang(ur) p, &:lang(yi) p, &:lang(ar) a, &:lang(ckb) a, &:lang(dv) a, &:lang(fa) a, &:lang(he) a, &:lang(ps) a, &:lang(sd) a, &:lang(ug) a, &:lang(ur) a, &:lang(yi) a, &:lang(ar) button, &:lang(ckb) button, &:lang(dv) button, &:lang(fa) button, &:lang(he) button, &:lang(ps) button, &:lang(sd) button, &:lang(ug) button, &:lang(ur) button, &:lang(yi) button, &:lang(ar) select, &:lang(ckb) select, &:lang(dv) select, &:lang(fa) select, &:lang(he) select, &:lang(ps) select, &:lang(sd) select, &:lang(ug) select, &:lang(ur) select, &:lang(yi) select, &:lang(ar) textarea, &:lang(ckb) textarea, &:lang(dv) textarea, &:lang(fa) textarea, &:lang(he) textarea, &:lang(ps) textarea, &:lang(sd) textarea, &:lang(ug) textarea, &:lang(ur) textarea, &:lang(yi) textarea, &:lang(ar) input, &:lang(ckb) input, &:lang(dv) input, &:lang(fa) input, &:lang(he) input, &:lang(ps) input, &:lang(sd) input, &:lang(ug) input, &:lang(ur) input, &:lang(yi) input, &:lang(ar) h1, &:lang(ckb) h1, &:lang(dv) h1, &:lang(fa) h1, &:lang(he) h1, &:lang(ps) h1, &:lang(sd) h1, &:lang(ug) h1, &:lang(ur) h1, &:lang(yi) h1, &:lang(ar) h2, &:lang(ckb) h2, &:lang(dv) h2, &:lang(fa) h2, &:lang(he) h2, &:lang(ps) h2, &:lang(sd) h2, &:lang(ug) h2, &:lang(ur) h2, &:lang(yi) h2, &:lang(ar) h3, &:lang(ckb) h3, &:lang(dv) h3, &:lang(fa) h3, &:lang(he) h3, &:lang(ps) h3, &:lang(sd) h3, &:lang(ug) h3, &:lang(ur) h3, &:lang(yi) h3, &:lang(ar) h4, &:lang(ckb) h4, &:lang(dv) h4, &:lang(fa) h4, &:lang(he) h4, &:lang(ps) h4, &:lang(sd) h4, &:lang(ug) h4, &:lang(ur) h4, &:lang(yi) h4, &:lang(ar) h5, &:lang(ckb) h5, &:lang(dv) h5, &:lang(fa) h5, &:lang(he) h5, &:lang(ps) h5, &:lang(sd) h5, &:lang(ug) h5, &:lang(ur) h5, &:lang(yi) h5, &:lang(ar) h6, &:lang(ckb) h6, &:lang(dv) h6, &:lang(fa) h6, &:lang(he) h6, &:lang(ps) h6, &:lang(sd) h6, &:lang(ug) h6, &:lang(ur) h6, &:lang(yi) h6 {
      direction: rtl;
    }
  }
  ol {
    padding: 0;
  }
  body {
    flex-direction: column;
  }
  p, li, pre, code, blockquote {
    position: relative;
    word-break: break-word;
    word-wrap: break-word;
  }
  p, pre, li {
    white-space: pre-wrap;
  }
  li {
    &:has(>p) {
      white-space: normal;
    }
  }
  p, li {
    line-height: 1.875;
  }
  p {
    margin: 1rem 0;
  }
  form, body {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }
  h1, h2, h3, h4, h5, h6, th {
    font-variation-settings: "wght"500,"BEVL"10;
  }
  th {
    font-family: "t";
  }
  code {
    border-radius: 7px;
    box-shadow: inset 0 0 3px #cf0;
    font-size: 15px;
  }
  input, textarea {
    outline: 0;
    padding: 18px;
  }
  pre, code {
    background: #fcfff0;
    border: 1px dashed #bc0;
    font-family: c,monospace;
    padding: 2px 6px;
  }
  pre {
    padding: 10px 16px;
    code {
      border: 0;
      box-shadow: none;
      padding: 0;
    }
  }
  img {
    max-width: 100%;
  }
  hr {
    background: var(--svgHline);
    border: 0;
    height: 1px;
    margin: 32px 0;
    opacity: 0.8;
  }
  blockquote {
    margin: 0 0 0 22px;
    &:after {
      background: var(--svgQ1) 2px 0/8px no-repeat,var(--svgHline)0 100%repeat-x;
      bottom: 6px;
      content: "";
      font-size: 25px;
      left: -25px;
      opacity: 0.6;
      position: absolute;
      top: -3px;
      width: 10px;
    }
    &:before {
      background: var(--svgVline)0 16px repeat-y;
      bottom: 7px;
      content: "";
      left: -21px;
      opacity: 0.6;
      position: absolute;
      top: 5px;
      width: 1px;
    }
  }
  p {
    button {
      display: inline-block;
    }
    strong {
      &>a {
        border-bottom: 2px solid #03a;
        padding-bottom: 6px;
        &:hover {
          border-color: #f40;
          color: #f40;
        }
      }
    }
  }
  ul {
    &>li {
      &:before {
        background: linear-gradient(#ef0,#ae0);
        border-radius: 8px;
        box-shadow: 0 0 2px inset #690;
        content: "";
        height: 8px;
        margin-left: -1.625rem;
        position: absolute;
        top: 0.725rem;
        width: 8px;
      }
    }
  }
  h1, h2, h3, h4, h5, h6 {
    align-items: center;
    font-family: t,sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 1em 0;
    position: relative;
    word-spacing: 2px;
  }
  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: 80%;
  }
  blockquote {
    &>ul:last-child, &>ol:last-child {
      margin-bottom: 1rem;
    }
    &>ul:first-child, &>ol:first-child {
      margin-top: 1rem;
    }
  }
  ul+img, ol+img, img+ol, img+ul {
    padding-top: 1.5rem;
  }
  @media (max-width: 560px) {
    html, body, input, textarea, b {
      font-size: 16px;
      font-weight: 400;
    }
    h1 {
      font-size: 22px;
    }
    h2 {
      font-size: 21px;
    }
    h3 {
      font-size: 20px;
    }
    h4 {
      font-size: 19px;
    }
    h5 {
      font-size: 18px;
    }
    h6 {
      font-size: 17px;
    }
    ol, ul {
      margin: -0.25rem 0;
    }
    p, li {
      line-height: 1.875;
      margin: 0.5rem 0;
    }
    p+ul, p+ol, ol+p, ul+p {
      margin-top: 1rem;
    }
  }
}

body {
  &>.scroll {
    background: #fff;
    justify-content: center;
    position: absolute;
    width: 100%;
  }
}

.shine {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  &::after {
    background: linear-gradient(120deg,transparent 30%,var(--cShine) 50%,transparent 70%);
    content: "";
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  &:hover {
    &::after {
      animation: shine 0.5s ease 0.5s forwards;
    }
  }
}

@-moz-keyframes shine {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

@-webkit-keyframes shine {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

@-o-keyframes shine {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

@keyframes shine {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

table {
  background: linear-gradient(0,#f9f9f9,#fff);
  border: 1px solid #ccc;
  border-collapse: collapse;
  box-shadow: 0 0 3px #bbb inset;
  margin: 1em 0;
  text-align: center;
  width: 100%;
}

td, tr {
  position: relative;
}

tr:before, td:before {
  content: "";
  opacity: 0.3;
  position: absolute;
}

tr {
  &:before {
    background: var(--svgHline) repeat-x;
    height: 1px;
    left: 0;
    right: 0;
  }
}

td {
  &:before {
    background: var(--svgVline) repeat-y;
    bottom: 0;
    left: 0;
    top: 0;
    width: 1px;
  }
}

thead {
  background: linear-gradient(0,#f9f9f9,#fff);
  box-shadow: 0 0 3px #bbb inset;
}

table {
  tr:first-child:before, td:first-child:before {
    background: none;
  }
  &>tbody>tr>td, &>thead>tr>th {
    border: none;
    padding: 16px;
  }
}

summary {
  &+table {
    margin-top: -1rem;
    &>thead {
      box-shadow: none;
    }
    &>tbody {
      &>tr {
        &:first-child {
          &:before {
            background: var(--svgHline) repeat-x;
          }
        }
      }
    }
  }
}

details {
  &>table {
    border: 0;
    &:last-child {
      margin-bottom: -0.5rem;
    }
  }
}

:root {
  --btnBg:  linear-gradient(45deg, #f50 0, #e63 40%, #900 100%);
}

input[type=radio] {
  display: none;
  &+label {
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
    user-select: none;
    &:before {
      border: 2px solid #000;
      border-radius: 14px;
      content: "";
      display: block;
      height: 12px;
      margin-top: -8px;
      position: absolute;
      top: 50%;
      width: 12px;
    }
    &:after {
      background: transparent;
      border-radius: 8px;
      content: "";
      height: 8px;
      left: 4px;
      margin-top: -4px;
      position: absolute;
      top: 50%;
      width: 8px;
    }
    &:after, &:before {
      transition: all 0.3s ease-in-out;
    }
  }
  &:checked {
    &+label {
      &:after {
        background: #000;
      }
    }
  }
  &:hover+label:before, &+label:hover:before {
    border-color: #f40;
  }
  &:checked {
    &:hover+label:after, &+label:hover:after {
      background: #f40;
    }
  }
}

body {
  overflow: hidden;
}

i-h.F {
  width: 100%;
}