*{
  font-family: "M PLUS 2", sans-serif;
	font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-wrap-mode: nowrap;
}

:root{
  --bgcolor:#ffffff8a;
  --searchbtnclr:rgba(255, 255, 255, 0.759);
  --primary:#00000011;
  --radius:0.4;
  --iconbg:rgba(255, 255, 255, 0.759);
  --battery-bg:#1088F255;
  --battery-charging-bg:#00ED4B55;
  --textcolor:#000;
  --bg-blur:#fff6;
  --modal-bg:#f7f7f7f7;
  --border-color:rgba(0, 0, 0, 0.1);
  --icon-wrapper-bg:#fff7;
  --history-item-bg:#fff;
  --delete-btn-bg:color(display-p3 0.677 0 0.021 / 1);
  --input-bg:#0001;
  --close-btn-hover:rgba(0, 0, 0, 0.1);
  --md-ripple-hover-color:#0000;
  --md-ripple-pressed-color:#000;
}

/* ダークモード用の変数 */
@media (prefers-color-scheme: dark) {
  :root {
    --bgcolor:rgba(17, 17, 17, 0.67);
    --searchbtnclr:rgba(0, 0, 0, 0.314);
    --primary:color(display-p3 0.948 0.777 0 / 1);
    --iconbg:rgba(14, 14, 14, 0.435);
    --battery-bg:#1088F244;
    --battery-charging-bg:#00ED4B44;
    --textcolor:#fff;
    --bg-blur:rgba(4, 4, 4, 0.4);
    --modal-bg:rgba(40, 40, 40, 0.95);
    --border-color:rgba(255, 255, 255, 0.15);
    --icon-wrapper-bg:rgba(60, 60, 60, 0.7);
    --history-item-bg:rgba(255, 255, 255, 0.1);
    --delete-btn-bg:color(display-p3 0.677 0 0.021 / 1);
    --input-bg:rgba(255, 255, 255, 0.1);
    --close-btn-hover:rgba(255, 255, 255, 0.1);
    --md-ripple-pressed-color:#fff;
  }
  .searchbutton{
    color:#fff;
  }
  .metaBall::before {
    background: #000 !important;
  }
  .metaballcontainer{
    background: #fff !important;
    mix-blend-mode: darken!important;
  }
  .linkedBalls{
    color: #fff !important;
  }
    #linkedBalls-4{
      color: #000 !important;
    }
}

body {
	margin: 0;
  width:100vw;
	height: calc(100vh + 2px);
	background-size: cover;
	background-position: center;
  color: var(--textcolor);
}

::-webkit-scrollbar {
	display: none
  }
.appswitchicon {
    height: 90px;
    width: 90px;
    position: absolute;
    background: #fff;
    z-index: 1;
    scale:0;
    filter:blur(10px);
    transition:all 0.5s ease;
}

.appswitchicon.show {
    scale:1;
    filter:blur(0px);
}


@media (max-width: 750px) {
  div#\32.metaBall{
    transition:all 0.8s cubic-bezier(.77,0,.49,1);
    position:relative;
    right:60px;
    height:20px;
    width:20px;
    margin-left: -25px;
    margin-right: -25px;
  }
  #linkedBalls-2{
    scale:0;
  }
  .metaBall.search.hide{
    right:-40px!important;
  }
}

@media (max-width: 590px) {
  div#\33.metaBall{
    transition:all 0.8s cubic-bezier(.77,0,.49,1);
    position:relative;
    right:90px;
    height:20px;
    width:20px;
    margin-left: -25px;
    margin-right: -25px;
  }
  #linkedBalls-3{
    scale:0;
  }
  .metaBall.search.hide{
    right:0px!important;
  }
}



.metaballcontainer {
    filter: contrast(25) blur(0.3px);
    mix-blend-mode: lighten;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: gap 1.3s 
cubic-bezier(0.17, 1.35, 0.08, 1);
    overflow: hidden;
    position: fixed;
    width: 100vw;
    right: 0;
    bottom: 32px;
}

    .metaballcontainer.hide {
      gap: 0px;
    }

    .metaBall {
      position: relative;
      width: 120px;
      height: 120px;
      transition: all 0.6s cubic-bezier(.21,0,.21,1);
      scale:1;
      right:0px;
      z-index: 1;
    }

    .metaBall.search{
      width: 220px !important;
      transition: all 1.3s cubic-bezier(0.17, 1.35, 0.08, 1)!important;
    }
    /* メタボール風の見た目 */
    .metaBall::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 100px;
      background: rgba(255, 255, 255, 1);
      filter: blur(20px);
    }
    /* 追加: hideクラスで非表示 */
    .metaBall.hide {
      width: 60px;
      height: 60px;
      right:100px;
      transition: all 1.3s cubic-bezier(0.17, 1.35, 0.08, 1);
      filter: blur(5px);
    }
    .metaBall.search.hide {
      height: 130px;
      right:-90px;
      width: 500px !important;
      transition: all 1.3s cubic-bezier(0.17, 1.35, 0.08, 1)!important;
    }

    .linkedBalls {
      filter: none;
      border-radius: 100px;
      box-sizing: border-box;
      color: #000;
      text-align: center;
      opacity: 1;
      z-index: 2;
      transition: opacity 0.2s ease,filter 0.2s ease,scale 0.6s cubic-bezier(.21,0,.21,1);
      filter:blur(0px);
      scale:1;
      /* 位置・サイズ・レイアウト系はJSで制御 */
    }
    /* .hide時も連動 */
    .linkedBalls.hide {
      opacity: 0;
      filter:blur(8px);
      scale:0.3;
    }
    /* .hide時も連動 */
    #linkedBalls-1 {
    opacity: 1 !important;
    filter: blur(0px) !important;
    display: flex;
    height: 100%;
    z-index: 3;
    overflow: hidden;
      scale: 1 !important;;
}
    #linkedBalls-4{
      background:color(display-p3 0.948 0.777 0 / 1);
      color: #000 !important;
      scale: 1 !important;;
    }
    /* .hide時も連動 */
    .linkedBall.hide {
      opacity: 0!important;
    }
    .iconbig {
    font-size: 50px;
    position: relative;
    top: 16%;
  }
  .searchinput {
    width: 100%;
    border: none;
    border-radius: 100px;
    background: #0000;
    text-align: center;
    font-size: 39px;
    font-weight: 300;
    outline:none;
    position:relative;
    left: 7px;
    transition:left 0.3s ease;
    color:var(--textcolor);
  }
.hide>.searchbutton {
    bottom: 16px;
    scale: 1;
    width: 110px;
}
.searchbutton {
    width: 0px;
    display: block;
    border: none;
    background: none;
    scale: 0;
    position: relative;
    bottom: 0px;
    transition: all 0.3s 
ease;
}
  .hide>.searchinput{
    left: 0px;
  }

.searchinput::placeholder {
  color: rgba(128, 128, 128, 0.7);
}

/* 履歴コンテナのスタイル */
.shortcuthistory,.info {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  mask-image: paint(squircle);
  background: var(--bgcolor);
  --squircle-radius: 55px;
  --squircle-smooth: 0.7;
  backdrop-filter: blur(16px);
  height: 100px;
  overflow:hidden;
}

.today {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--textcolor);
  font-size: 14px;
  line-height: 1.2;
  background:transparent;
  height:100px;
  width:200px;
  justify-content: center;
  filter: drop-shadow(0 4px 6px #0002);
mask-image: paint(squircle);
    --squircle-radius: 44px;
    --squircle-smooth: 3;
  position: relative;
  overflow: hidden;
  border:none;
}
.history-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 100px;
  height: 100px;
}

.history-item:hover {
  transform: scale(0.96);
}.history-item:active {
  transform: scale(0.9);
}

.history-icon-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 8px;

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 55C0 29.573 0 16.8595 7.65351 8.76409C8.01325 8.38358 8.38358 8.01325 8.76409 7.65351C16.8595 0 29.573 0 55 0V0C80.427 0 93.1405 0 101.236 7.65351C101.616 8.01325 101.987 8.38358 102.346 8.76409C110 16.8595 110 29.573 110 55V55C110 80.427 110 93.1405 102.346 101.236C101.987 101.616 101.616 101.987 101.236 102.346C93.1405 110 80.427 110 55 110V110C29.573 110 16.8595 110 8.76409 102.346C8.38358 101.987 8.01325 101.616 7.65351 101.236C0 93.1405 0 80.427 0 55V55Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 55C0 29.573 0 16.8595 7.65351 8.76409C8.01325 8.38358 8.38358 8.01325 8.76409 7.65351C16.8595 0 29.573 0 55 0V0C80.427 0 93.1405 0 101.236 7.65351C101.616 8.01325 101.987 8.38358 102.346 8.76409C110 16.8595 110 29.573 110 55V55C110 80.427 110 93.1405 102.346 101.236C101.987 101.616 101.616 101.987 101.236 102.346C93.1405 110 80.427 110 55 110V110C29.573 110 16.8595 110 8.76409 102.346C8.38358 101.987 8.01325 101.616 7.65351 101.236C0 93.1405 0 80.427 0 55V55Z" fill="black"/></svg>');

  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px #0001);
}

.history-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
}

.bottombar {
  position: fixed;
  bottom: 0; /* 常に一定位置（基準）に固定 */
  left: 0;
  width:100vw;
  transform: translate(0, 180px); /* 初期状態：Y方向に隠す */
  display: flex;
  align-items: center;
  gap: 16px;
  isolation: isolate;
  will-change: transform; /* ←パフォーマンス最適化 */
  transition: transform 0.6s cubic-bezier(.37, 0, 0, 1),scale 0.6s cubic-bezier(.37, 0, 0, 1);
  z-index: 10;
  justify-content: center;
  padding-bottom: 32px;
  padding-top: 32px;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.33) 18%, rgba(0, 0, 0, 0.16) 54%, rgba(0, 0, 0, 0.07) 76%, rgba(0, 0, 0, 0));
}

.bottombar.show {
  transform: translate(0, 180px);
}

.bottombar.top {
  transform: translate(0, 0); /* 表示状態：通常位置に */
  scale: 1 !important;
}

.bg{
  pointer-events: none;
  position: fixed;
  right: 0;
  top:0;
  backdrop-filter: blur(24px);
  background:var(--bg-blur);
  transition: all 0.6s cubic-bezier(.59,0,0,1), height 0s ease, width 0s ease;
  height: 100vh;
  width: 100vw;
  overflow: scroll;
  opacity: 0;
  padding-bottom:32px;
  z-index:9;
}

.bg.show{
  pointer-events: auto;
  opacity: 1;
}
.shortcuts {
  gap: 0px 40px;
  row-gap: 0px;
  column-gap: 40px;
  overflow: scroll;
  transition: transform 0.6s cubic-bezier(.37,0,0,1), 
              filter 0.6s cubic-bezier(.37,0,0,1), 
              opacity 0.6s cubic-bezier(.37,0,0,1),
              height 0s ease, 
              width 0s ease;
  width: 100vw;
  filter: blur(17px);
  opacity: 0;
  padding: 32px;
  box-sizing: border-box;
  margin: 0 auto;
  will-change: transform;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  transform: translateY(30vh);  /* ← margin-top の代わりに */
}

.shortcuts.show {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);  /* ← アニメーションで元の位置に */
}


.linktext {
  font-size: 27px;
  margin: 10px 0;
  color: var(--textcolor);
  margin-top: 16px;
  font-weight: nomal;
}
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  mask-image: paint(squircle);
  background: var(--bgcolor);
  --squircle-radius: 55px;
  --squircle-smooth: var(--radius);
  align-items: flex-start;
  padding: 22px 12px;
  width: 402px;
  padding-bottom: 0px;
  gap: 4px 24px;
  backdrop-filter: blur(160px);
    isolation: isolate;
    position:relative;
    z-index:1;
}

.linkbox-anchor {
  width: 110px;
  display: block;
  margin: 0px;
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  text-decoration: none;
  color: inherit;
}

.linkbox-anchor:hover {
  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY));
}

.linkbox {
  width: 110px;
  transform-style: preserve-3d;
  perspective: 800px;
  transform: translate3d(0,0,0);
  margin-bottom: 3px;
  filter: drop-shadow(0 5px 9px #0001);
}

.icon-wrapper {
  height: 110px;
  padding: 0;
  width: 110px;
  background:var(--icon-wrapper-bg);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 55C0 29.573 0 16.8595 7.65351 8.76409C8.01325 8.38358 8.38358 8.01325 8.76409 7.65351C16.8595 0 29.573 0 55 0V0C80.427 0 93.1405 0 101.236 7.65351C101.616 8.01325 101.987 8.38358 102.346 8.76409C110 16.8595 110 29.573 110 55V55C110 80.427 110 93.1405 102.346 101.236C101.987 101.616 101.616 101.987 101.236 102.346C93.1405 110 80.427 110 55 110V110C29.573 110 16.8595 110 8.76409 102.346C8.38358 101.987 8.01325 101.616 7.65351 101.236C0 93.1405 0 80.427 0 55V55Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 55C0 29.573 0 16.8595 7.65351 8.76409C8.01325 8.38358 8.38358 8.01325 8.76409 7.65351C16.8595 0 29.573 0 55 0V0C80.427 0 93.1405 0 101.236 7.65351C101.616 8.01325 101.987 8.38358 102.346 8.76409C110 16.8595 110 29.573 110 55V55C110 80.427 110 93.1405 102.346 101.236C101.987 101.616 101.616 101.987 101.236 102.346C93.1405 110 80.427 110 55 110V110C29.573 110 16.8595 110 8.76409 102.346C8.38358 101.987 8.01325 101.616 7.65351 101.236C0 93.1405 0 80.427 0 55V55Z" fill="black"/></svg>');
  transition: all 0.8s cubic-bezier(.38,2.04,.39,1), filter 0.5s cubic-bezier(.25,0,0,1);
  scale: 1;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  transform-style: preserve-3d;
  transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg);
  filter: brightness(1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.icon-wrapper:hover {
  transition: all 0.6s cubic-bezier(0,1,.63,1);
  transform: translate3d(var(--moveX),var(--moveY),20px) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  scale: 1.1;
}

.icon-wrapper:active {
  scale: .95;
}

.linkbox-img {
  height: 110px;
  width: 110px;
  padding: 0;
  margin: 0;
  transition: all 0.8s cubic-bezier(.38,2.04,.39,1);
  scale: 1;
  transform: translate3d(0,0,40px);
  filter: drop-shadow(0 0 0 #0000);
  border-radius: 12px;
  object-fit: contain;
  filter: brightness(1);
}

.linkbox-img:hover {
  scale: 1.1;
  transform: translate3d(var(--moveX),var(--moveY),60px);
  filter: drop-shadow(0 5px 10px #0003);
  transition: all 0.6s cubic-bezier(0,1,.63,1);
  transform: translateX(var(--moveX, 0px)) translateY(var(--moveY, 0px));
  filter: brightness(1.3);
}


.linkbox-label {
  width: 110px;
  text-align: center;
  margin-top: 4px;
  color: var(--textcolor);
  font-size: 14px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linkbg {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition:all 0.8s ease;
  position: relative;
}
md-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
iframe{
  background:var(--searchbtnclr);
  border-radius:24px!important;
  filter: drop-shadow(0 4px 6px #0002);
}
@media (min-width: 956px) and (max-width: 1421px) {
  .linkbg:nth-child(3) {
    bottom:280px;
  }
  .linkbg:nth-child(5) {
    bottom:280px;
  }
}

/* 1422px ~ 1887px */
@media (min-width: 1422px) and (max-width: 1887px) {
  .linkbg:nth-child(4) {
    bottom:280px;
  }
  .linkbg:nth-child(6) {
    bottom:140px;
  }
}

/* 1888px ~ 2353px */
@media (min-width: 1888px) and (max-width: 2353px) {
  .linkbg:nth-child(6) {
    bottom:130px;
  }
}

/* 2354px ~ 2819px */
@media (min-width: 2354px) and (max-width: 2819px) {
  .linkbg:nth-child(6) {
    bottom:140px;
  }
}




/* 設定モーダルのスタイル */
.settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(.32,0,.03,1), visibility 0.5s cubic-bezier(.32,0,.03,1);
}

.settings-modal.show {
  opacity: 1;
  visibility: visible;
}

.settings-modal-content {
  
  --squircle-radius: 40px;
  --squircle-smooth:  var(--radius);
  background: paint(squircle);
  --squircle-fill: var(--modal-bg);
  padding: 20px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  filter:blur(16px) drop-shadow(0 20px 40px #0003);
  transform: scale(0.8) translateY(20px);
  transition: all 0.8s cubic-bezier(.43,0,0,1);
}

.settings-modal.show .settings-modal-content {
  transform: scale(1) translateY(0);
  filter:blur(0px) drop-shadow(0 20px 40px #0003);
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.settings-header h3 {
  margin: 0;
  color: var(--textcolor);
}

.close-settings {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--textcolor);
  opacity: 0.7;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.close-settings:hover {
  background: var(--close-btn-hover);
  opacity: 1;
}

.setting-item {
  margin-bottom: 20px;
}

.setting-item label {
  display: block;
  margin-bottom: 8px;
  color: var(--textcolor);
  font-weight: nomal;
}

.setting-item input[type="text"] {
  width: 62%;
  padding: 16px;
  border:none;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
  mask-image: paint(squircle);
  --squircle-radius: 100px;
  --squircle-smooth: 0.3;
  background: var(--input-bg);
  color: var(--textcolor);
  outline:none;
}

.setting-item input[type="text"]::placeholder {
  color: rgba(128, 128, 128, 0.7);
}

.setting-item button {
  background: var(--primary);
  color: #000;
  border: none;
  padding: 16px 24px;
  mask-image: paint(squircle);
  --squircle-radius: 100px;
  --squircle-smooth: 0.3;
  cursor: pointer;
}

.search-history-item {
  background: var(--history-item-bg);
  padding: 12px;
  margin-bottom: 5px;
  mask-image: paint(squircle);
  --squircle-radius: 100px;
  --squircle-smooth: 0.3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--textcolor);
}

.delete-search-item {
  background: var(--delete-btn-bg);
  color: #fff;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

#clear-search-history {
  background: var(--delete-btn-bg) !important;
  color: #fff!important;
}

/* 検索履歴パネルのスタイル */
.searchhistory {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(.32,0,.03,1), visibility 0.5s cubic-bezier(.32,0,.03,1);
}

.searchhistory.show {
  opacity: 1;
  visibility: visible;
}

.searchhistory-content {
  position: absolute;
  bottom: 24px;
  left: 10vw;
  right: 10vw;
  padding: 20px;
  max-height: 50vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: all 0.8s cubic-bezier(.43,0,0,1);
  filter:blur(16px) drop-shadow(0 20px 40px #0003);
  --squircle-radius: 40px;
  --squircle-smooth:  var(--radius);
  background: paint(squircle);
  --squircle-fill: var(--modal-bg);
}

.searchhistory.show .searchhistory-content {
  transform: translateY(0);
  filter:blur(0px) drop-shadow(0 20px 40px #0003);
}

.searchhistory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.searchhistory-header h3 {
  margin: 0;
  color: var(--textcolor);
}

.close-history {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--textcolor);
  opacity: 0.7;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.close-history:hover {
  background: var(--close-btn-hover);
  opacity: 1;
}

.searchhistory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.searchhistory-list a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--textcolor);
  border-radius: 8px;
}

.searchhistory-list .empty-message {
  text-align: center;
  color: var(--textcolor);
  opacity: 0.7;
  font-style: italic;
  padding: 20px;
}

.naead{
  display: flex !important;
    justify-content: center;
    margin: 0px;
}

/* ダークモード用のスクロールバー */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}