1  :root {
  2      --stone-50: 250, 250, 249;
  3      --stone-100: 245, 245, 244;
  4      --stone-200: 231, 229, 228;
  5      --stone-300: 214, 211, 209;
  6      --stone-400: 168, 162, 158;
  7      --stone-500: 120, 113, 108;
  8      --stone-600: 87, 83, 78;
  9      --stone-700: 68, 64, 60;
 10      --stone-800: 41, 37, 36;
 11      --stone-900: 28, 25, 23;
 12      --stone-950: 12, 10, 9;
 13  
 14      --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
 15      --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
 16      --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 17      --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
 18      --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 19      --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
 20  
 21      --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
 22      --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
 23      --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
 24      --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
 25      --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
 26      --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
 27  
 28      --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 29      --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
 30      --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
 31      --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 32      --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 33      --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
 34  
 35      --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
 36      --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
 37      --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 38      --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 39      --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 40      --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 41  }
 42  
 43  html {
 44      color: rgb(var(--stone-100));
 45      @media (prefers-color-scheme: light) {
 46          color: rgb(var(--stone-950));
 47      }
 48  }
 49  
 50  main {
 51      .route-item {
 52          .item-tabs {
 53              .visible-tab {
 54                  color: rgb(var(--stone-900));
 55                  background-color: rgba(var(--stone-200), 0.5);
 56              }
 57              .visible-tab:active {
 58                  background-color: rgba(var(--stone-200), 0.75);
 59              }
 60              @media (prefers-color-scheme: dark) {
 61                  .visible-tab {
 62                      color: rgb(var(--stone-100));
 63                      background-color: rgba(var(--stone-700), 0.5);
 64                  }
 65                  .visible-tab:active {
 66                      background-color: rgba(var(--stone-700), 0.75);
 67                  }
 68              }
 69          }
 70          .item-belong > div {
 71              display: flex;
 72              flex-direction: column;
 73              padding: 0.5rem;
 74              gap: 0.5rem;
 75          }
 76      }
 77  
 78      .store {
 79          .item-list-grid {
 80              display: grid;
 81              grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
 82              gap: 0.5rem 0.5rem;
 83              justify-content: start;
 84              place-items: center;
 85          }
 86          .item-list-grid.unfilled {
 87              grid-template-columns: repeat(auto-fit, minmax(3rem, 3rem));
 88          }
 89      }
 90  }
 91  
 92  #header {
 93      #anthol-logo {
 94          width: calc(100px + 1rem);
 95          transition:
 96              width 150ms var(--ease-out-quint),
 97              scale 50ms var(--ease-out-expo);
 98      }
 99      #anthol-logo:active {
100          scale: 0.9925;
101      }
102      #anthol-logo.collapsed {
103          width: 33px;
104      }
105  }
106  
107  .widget-market {
108      .arrow-box {
109          opacity: 0;
110          transition: opacity 0.025s;
111      }
112      .market-box:hover .arrow-box {
113          opacity: 1;
114      }
115      .arrow {
116          visibility: hidden;
117          padding: 0.375rem;
118          margin: 3rem 0;
119          border-radius: 0.375rem;
120          pointer-events: auto;
121          cursor: pointer;
122          transition: scale 50ms ease-out;
123  
124          :hover {
125              scale: 1.02;
126          }
127          :active {
128              scale: 1.005;
129          }
130          &.visible {
131              visibility: visible;
132          }
133  
134          > div {
135              width: 100%;
136              height: 100%;
137              display: grid;
138              place-items: center;
139              border-radius: 0.375rem;
140              -webkit-backdrop-filter: blur(12px);
141              backdrop-filter: blur(12px);
142              transition: background-color 50ms ease-out;
143              color: rgb(var(--stone-400));
144              border: 1px solid rgb(var(--stone-200));
145              background-color: rgba(var(--stone-50), 0.5);
146          }
147  
148          :hover > div,
149          :active > div {
150              background-color: rgba(var(--stone-100), 0.75);
151          }
152          @media (prefers-color-scheme: dark) {
153              > div {
154                  color: rgb(var(--stone-200));
155                  border: 1px solid rgb(var(--stone-600));
156                  background-color: rgba(var(--stone-800), 0.5);
157              }
158              :hover > div,
159              :active > div {
160                  background-color: rgba(var(--stone-700), 0.75);
161              }
162          }
163      }
164  }
165  
166  .drop-shadow-lg-with-prefers-color-scheme {
167      filter: drop-shadow(0 10px 8px rgba(var(--stone-100), 0.06))
168          drop-shadow(0 4px 3px rgba(var(--stone-100), 0.15));
169  
170      @media (prefers-color-scheme: dark) {
171          filter: drop-shadow(0 10px 8px rgba(var(--stone-900), 0.04))
172              drop-shadow(0 4px 3px rgba(var(--stone-900), 0.1));
173      }
174  }
175  
176  .break-phrase {
177      word-break: auto-phrase;
178  }