.cg {
  --u: 2px;
  --w: 420;
  --h: 280;
  --cg-surface: rgba(11, 13, 20, .6);
  --ar: var(--accent-rgb, 0, 174, 255);
  position: relative;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  font-family: "Inter", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.1934;
  color: #fff;
  text-align: left;
  letter-spacing: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  transition: opacity .25s cubic-bezier(.39, .58, .57, 1), transform .25s cubic-bezier(.39, .58, .57, 1);
}
.cg *, .cg *::before, .cg *::after { box-sizing: border-box; }
.cg.is-closed { opacity: 0; transform: translateY(calc(-60 * var(--u))); }
.cg.is-leaving { opacity: 0; transform: translateY(calc(60 * var(--u))); transition-duration: .3s; transition-timing-function: cubic-bezier(.47, 0, .75, .72); }

.cg-ico {
  display: block;
  width: .875em;
  height: .875em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.cg-plate, .cg-panel {
  position: absolute;
  border-radius: calc(8 * var(--u));
  background: var(--cg-surface);
  -webkit-backdrop-filter: blur(calc(5.5 * var(--u)));
  backdrop-filter: blur(calc(5.5 * var(--u)));
}
.cg-plate::before, .cg-tex {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--ar));
  -webkit-mask: url("img/gui/rectgui.png") 0 0 / 100% 100% no-repeat;
  mask: url("img/gui/rectgui.png") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.cg-plate {
  top: calc(-25 * var(--u));
  height: calc(20 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(6.5 * var(--u));
}
.cg-themes { left: calc(6 * var(--u)); gap: calc(6 * var(--u)); }
.cg-links { left: calc(117 * var(--u)); gap: calc(5 * var(--u)); }
.cg-dot {
  position: relative;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: var(--cur-pointer, pointer);
}
.cg-dot::before, .cg-dot::after { content: ""; position: absolute; border-radius: 50%; transition: all .3s ease-in-out; }
.cg-dot::before { inset: 0; background: var(--c); opacity: .5; }
.cg-dot::after { inset: 0; border: calc(.25 * var(--u)) solid var(--c); opacity: 0; }
.cg-dot.is-on::before { inset: calc(.75 * var(--u)); opacity: 1; }
.cg-dot.is-on::after { inset: calc(-.5 * var(--u)); opacity: 1; }
.cg-link {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(11 * var(--u));
  padding: 0 calc(7 * var(--u));
  border-radius: calc(4 * var(--u));
  background: rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0);
  font-size: calc(7 * var(--u));
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: all .3s ease-in-out;
}
.cg-link:hover { background: rgba(var(--ar), .45); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); color: #fff; }

.cg-panel { inset: 0; }
.cg-tex { z-index: 0; }

.cg-rail {
  position: absolute;
  left: calc(6 * var(--u));
  top: calc(6 * var(--u));
  bottom: calc(6 * var(--u));
  width: calc(30 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(0, 0, 0, .15);
  z-index: 3;
}
.cg-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(5 * var(--u));
  background: none;
  font-size: calc(8 * var(--u));
  color: rgba(255, 255, 255, .5);
  cursor: var(--cur-pointer, pointer);
  transition: color .3s ease-in-out;
}
.cg-cell::after {
  content: "";
  position: absolute;
  inset: calc(1 * var(--u));
  border-radius: calc(5 * var(--u));
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0);
  transition: all .3s ease-in-out;
}
.cg-cell:hover { color: #fff; }
.cg-cell.is-on { color: rgb(var(--ar)); }
.cg-cell.is-on::after { inset: 0; box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); }
.cg-logo { position: absolute; left: calc(7 * var(--u)); top: calc(4 * var(--u)); cursor: var(--cur-default, default); color: rgb(var(--ar)); }
.cg-logo .cg-ico { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.cg-logo::after { display: none; }
.cg-tabs {
  position: absolute;
  left: calc(7 * var(--u));
  top: calc((var(--h) / 2 - 74) * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}
.cg-tip {
  position: absolute;
  right: calc(100% + 4 * var(--u));
  top: calc(1 * var(--u));
  height: calc(14 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(3 * var(--u)) 0 calc(4 * var(--u));
  margin-right: calc(-7 * var(--u));
  border-radius: calc(4 * var(--u));
  background: rgba(18, 25, 43, .12);
  -webkit-backdrop-filter: blur(calc(3 * var(--u)));
  backdrop-filter: blur(calc(3 * var(--u)));
  font-size: calc(8 * var(--u));
  color: rgb(235, 235, 235);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(16 * var(--u)));
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s linear .3s;
}
.cg-tip em { font-style: normal; color: rgb(var(--ar)); margin-left: .28em; }
.cg-cell:hover .cg-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.cg-search {
  position: absolute;
  left: calc(42 * var(--u));
  top: calc(6 * var(--u));
  width: calc(140 * var(--u));
  height: calc(20 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(0, 0, 0, .15);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0);
  z-index: 3;
  cursor: var(--cur-text, text);
  transition: all .3s ease-in-out;
}
.cg-search:hover, .cg-search:focus-within { background: rgba(25, 25, 25, .3); }
.cg-search:focus-within { box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); }
.cg-search .cg-ico { width: calc(6 * var(--u)); height: calc(6 * var(--u)); color: rgba(255, 255, 255, .55); transition: color .3s; }
.cg-search:hover .cg-ico, .cg-search:focus-within .cg-ico { color: rgb(var(--ar)); }
.cg-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin-left: calc(5 * var(--u));
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: calc(7 * var(--u));
  color: rgba(255, 255, 255, .9);
  caret-color: rgb(var(--ar));
}
.cg-search input::placeholder { color: rgba(255, 255, 255, .5); transition: color .3s; }
.cg-search:hover input::placeholder { color: rgba(255, 255, 255, .9); }
.cg-search input::selection { background: rgba(var(--ar), .35); }

.cg-head {
  position: absolute;
  left: calc(188 * var(--u));
  right: calc(6 * var(--u));
  top: calc(6 * var(--u));
  height: calc(20 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(0, 0, 0, .15);
  z-index: 3;
}
.cg-head .cg-ico { font-size: calc(7 * var(--u)); color: rgb(var(--ar)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
.cg-head__label { margin-left: calc(5 * var(--u)); font-size: calc(7 * var(--u)); color: rgb(240, 240, 240); white-space: nowrap; }
.cg-found { margin-left: auto; font-style: normal; font-size: calc(6.5 * var(--u)); color: rgb(var(--ar)); white-space: nowrap; }
.cg-head.is-anim .cg-ico, .cg-head.is-anim .cg-head__label { animation: cgSlide .3s ease-in-out; }
@keyframes cgSlide { from { opacity: 0; transform: translateY(calc(5 * var(--u))); } }

.cg-box {
  position: absolute;
  top: calc(32 * var(--u));
  bottom: calc(6 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgba(0, 0, 0, .15);
  overflow: hidden;
  z-index: 2;
}
.cg-list { left: calc(42 * var(--u)); width: calc(140 * var(--u)); }
.cg-set { left: calc(188 * var(--u)); right: calc(6 * var(--u)); }
.cg-page { left: calc(42 * var(--u)); right: calc(6 * var(--u)); display: none; align-content: center; justify-items: center; gap: calc(4 * var(--u)); text-align: center; padding: 0 calc(20 * var(--u)); }
.cg-page > b { font-weight: 400; font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, .9); }
.cg-page > span { font-size: calc(6.5 * var(--u)); color: rgba(255, 255, 255, .55); max-width: 40em; }
.cg.is-page .cg-page { display: grid; }
.cg.is-page .cg-list, .cg.is-page .cg-set { display: none; }

.cg-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  padding: calc(6 * var(--u));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.cg-scroll::-webkit-scrollbar { display: none; }

.cg-card {
  position: relative;
  flex: none;
  min-height: calc(20 * var(--u));
  padding: 0 calc(6 * var(--u)) calc(4 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(0, 0, 0, .15);
  cursor: var(--cur-pointer, pointer);
  transition: background-color .3s ease-in-out;
}
.cg-card:hover { background: rgba(25, 25, 25, .3); }
.cg-card::before, .cg-card::after { content: ""; position: absolute; border-radius: calc(5 * var(--u)); pointer-events: none; transition: all .3s ease-in-out; }
.cg-card::before { inset: calc(1 * var(--u)); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0); z-index: 1; }
.cg-card.is-on::before { inset: 0; box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); }
.cg-card.is-on:hover::before { box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), .7); }
.cg-card::after { inset: 0; background: rgb(var(--ar)); opacity: 0; }
.cg-card.is-sel::after { opacity: .06; }
.cg-card.is-sel.is-on::after { opacity: .21; }
.cg-card__top { position: relative; height: calc(16 * var(--u)); display: flex; align-items: center; z-index: 2; }
.cg-card__name { font-size: calc(7 * var(--u)); color: rgba(255, 255, 255, .62); white-space: nowrap; transition: color .3s ease-in-out; }
.cg-card:hover .cg-card__name { color: rgba(255, 255, 255, .72); }
.cg-card.is-on .cg-card__name { color: rgba(255, 255, 255, .9); }
.cg-card.is-on:hover .cg-card__name { color: #fff; }
.cg-card__ctl {
  position: absolute;
  right: 0;
  top: calc(3 * var(--u));
  height: calc(10 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
}
.cg-bind, .cg-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(10 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(0, 0, 0, .12);
  font-size: calc(6 * var(--u));
  white-space: nowrap;
  transition: all .3s ease-in-out;
}
.cg-bind { padding: 0 calc(4.5 * var(--u)); color: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0); }
.cg-bind:hover { background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), .5); color: rgba(255, 255, 255, .85); }
.cg-card.is-on .cg-bind { color: rgba(var(--ar), .85); }
.cg-bind.is-cap { background: rgba(var(--ar), .25); color: rgb(var(--ar)); animation: cgPulse 1s ease-in-out infinite; }
@keyframes cgPulse { 0%, 100% { box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), .4); } 50% { box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); } }
.cg-reset { width: calc(10 * var(--u)); color: rgba(255, 255, 255, .55); }
.cg-reset:hover { background: rgba(255, 70, 70, .45); color: #fff; }
.cg-tog { position: relative; width: calc(14 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(0, 0, 0, .2); transition: background-color .3s ease-in-out; }
.cg-tog i { position: absolute; left: calc(1.5 * var(--u)); top: calc(1.25 * var(--u)); width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .3); transition: all .3s ease-in-out; }
.cg-card.is-on .cg-tog { background: rgb(var(--ar)); }
.cg-card.is-on:hover .cg-tog { background: rgba(var(--ar), .7); }
.cg-card.is-on .cg-tog i { left: calc(7 * var(--u)); background: #fff; }
.cg-card__desc { position: relative; z-index: 2; font-size: calc(6 * var(--u)); line-height: 1.1934; color: rgba(255, 255, 255, .45); transition: color .3s ease-in-out; overflow-wrap: anywhere; }
.cg-card:hover .cg-card__desc { color: rgba(255, 255, 255, .57); }
.cg-card.is-on .cg-card__desc { color: rgba(255, 255, 255, .75); }
.cg-card.is-on:hover .cg-card__desc { color: rgba(255, 255, 255, .87); }

.cg-empty, .cg-none { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s ease-in-out, transform .3s ease-in-out; }
.cg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); opacity: 0; transform: translateY(calc(6 * var(--u))); }
.cg-empty .cg-ico { width: calc(8 * var(--u)); height: calc(8 * var(--u)); color: rgba(var(--ar), .4); }
.cg-empty span { font-size: calc(7 * var(--u)); color: rgba(255, 255, 255, .75); }
.cg.is-none .cg-empty { opacity: 1; transform: none; }
.cg-none { display: grid; place-items: center; font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, .9); }
.cg.is-sel .cg-none { opacity: 0; transform: translateY(calc(10 * var(--u))); }

.cg-row {
  position: relative;
  flex: none;
  border-radius: calc(5 * var(--u));
  background: rgba(40, 40, 40, .15);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0);
  transition: box-shadow .3s ease-in-out, background-color .3s ease-in-out;
}
.cg-row:hover { box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); }
.cg-row__top { height: calc(16 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(6 * var(--u)); }
.cg-lbl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: calc(6.5 * var(--u));
  color: rgba(255, 255, 255, .82);
  transition: color .3s ease-in-out;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20 * var(--u)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 20 * var(--u)), transparent);
}
.cg-row:hover .cg-lbl { color: #fff; }
.cg-val { flex: none; font-size: calc(6 * var(--u)); color: rgba(var(--ar), .85); white-space: nowrap; }
.cg-row:hover .cg-val { color: rgb(var(--ar)); }

.cg-row--float { height: calc(26 * var(--u)); cursor: var(--cur-pointer, pointer); }
.cg-track { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(17.5 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: rgba(0, 0, 0, .15); }
.cg-track b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(3 * var(--u) + (100% - 6 * var(--u)) * var(--p)); border-radius: inherit; background: rgba(var(--ar), .82); }
.cg-row:hover .cg-track b { background: rgb(var(--ar)); }
.cg-track i { position: absolute; top: calc(-1.5 * var(--u)); left: calc((100% - 6 * var(--u)) * var(--p)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgb(200, 200, 200); transition: background-color .3s; }
.cg-track i::after { content: ""; position: absolute; inset: calc(1 * var(--u)); border-radius: 50%; background: rgba(var(--ar), .7); }
.cg-row:hover .cg-track i { background: #fff; }
.cg-row:hover .cg-track i::after { background: rgb(var(--ar)); }

.cg-row--bool { height: calc(16 * var(--u)); cursor: var(--cur-pointer, pointer); }
.cg-sw { position: relative; flex: none; width: calc(12 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(3.5 * var(--u)); background: rgba(0, 0, 0, .2); transition: background-color .3s ease-in-out; }
.cg-sw i { position: absolute; left: calc(1.25 * var(--u)); top: calc(1.25 * var(--u)); width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgba(255, 255, 255, .2); transition: all .3s ease-in-out; }
.cg-row:hover .cg-sw i { background: rgba(255, 255, 255, .6); }
.cg-row--bool.is-on .cg-sw { background: rgba(var(--ar), .5); }
.cg-row--bool.is-on:hover .cg-sw { background: rgb(var(--ar)); }
.cg-row--bool.is-on .cg-sw i { left: calc(5.75 * var(--u)); background: rgba(255, 255, 255, .6); }
.cg-row--bool.is-on:hover .cg-sw i { background: #fff; }

.cg-chips { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)) calc(3 * var(--u)); padding: 0 calc(6 * var(--u)) calc(4 * var(--u)); }
.cg-chip {
  display: flex;
  align-items: center;
  height: calc(10 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(0, 0, 0, .25);
  font-size: calc(6 * var(--u));
  color: rgba(255, 255, 255, .51);
  white-space: nowrap;
  cursor: var(--cur-pointer, pointer);
  transition: all .3s ease-in-out;
}
.cg-row:hover .cg-chip { color: rgba(255, 255, 255, .6); }
.cg-chip.is-on { background: rgba(var(--ar), .5); color: rgba(255, 255, 255, .85); }
.cg-row:hover .cg-chip.is-on { background: rgb(var(--ar)); color: #fff; }

.cg-field {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(10 * var(--u));
  max-width: 55%;
  padding: 0 calc(5 * var(--u));
  border: 0;
  border-radius: calc(3 * var(--u));
  background: rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0);
  font: inherit;
  font-size: calc(6 * var(--u));
  color: rgba(255, 255, 255, .75);
  white-space: nowrap;
  overflow: hidden;
  cursor: var(--cur-pointer, pointer);
  transition: all .3s ease-in-out;
}
.cg-row:hover .cg-field { color: #fff; }
.cg-field.is-act { background: rgba(var(--ar), .15); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); color: rgb(var(--ar)); }
input.cg-field { width: 55%; outline: 0; cursor: var(--cur-text, text); caret-color: rgb(var(--ar)); color: #fff; }
.cg-lrows { display: grid; gap: calc(1 * var(--u)); padding: 0 calc(6 * var(--u)) calc(3 * var(--u)); }
.cg-lrow { display: flex; align-items: center; height: calc(12 * var(--u)); padding-left: calc(4 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(0, 0, 0, .14); font-size: calc(6 * var(--u)); color: rgba(255, 255, 255, .8); }
.cg-lrow:hover { background: rgba(0, 0, 0, .22); }
.cg-lrow span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.cg-lrow b { display: grid; place-items: center; width: calc(12 * var(--u)); height: calc(10 * var(--u)); margin-right: calc(4 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(0, 0, 0, .25); font-weight: 400; color: rgba(255, 255, 255, .65); cursor: var(--cur-pointer, pointer); }
.cg-lrow b:hover { background: rgba(0, 0, 0, .45); color: #fff; }

.cg-row--color { cursor: var(--cur-pointer, pointer); }
.cg-swatch { flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-right: calc(-1 * var(--u)); border-radius: 50%; background: var(--c); outline: calc(.25 * var(--u)) solid color-mix(in srgb, var(--c) 40%, transparent); outline-offset: calc(.5 * var(--u)); transition: outline-color .3s; }
.cg-row:hover .cg-swatch { outline-color: var(--c); }
.cg-bars { display: grid; gap: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)); }
.cg-bar { position: relative; height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); cursor: var(--cur-ew, ew-resize); }
.cg-bar::before { content: ""; position: absolute; inset: calc(-3 * var(--u)) 0; }
.cg-bar--h { background: linear-gradient(90deg, #f00, #ff0 16.6%, #0f0 33.3%, #0ff 50%, #00f 66.6%, #f0f 83.3%, #f00); }
.cg-bar--s { background: linear-gradient(90deg, var(--s0), var(--s1)); }
.cg-bar--v { background: linear-gradient(90deg, #000, var(--v1)); }
.cg-bar i { position: absolute; top: calc(-1 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-left: calc(-3 * var(--u)); border-radius: 50%; background: #fff; pointer-events: none; }
.cg-bar i::after { content: ""; position: absolute; inset: calc(1 * var(--u)); border-radius: 50%; background: var(--c); }
.cg-bar--h i::after { background: var(--hc); }

.cg-row--act { height: calc(16 * var(--u)); display: grid; place-items: center; cursor: var(--cur-pointer, pointer); }
.cg-row--act .cg-lbl { flex: none; -webkit-mask-image: none; mask-image: none; }
.cg-row--act:hover, .cg-row--act.is-flash { background: rgba(var(--ar), .25); }

.cg-grip { position: absolute; right: calc(6 * var(--u)); bottom: calc(6 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); z-index: 4; cursor: var(--cur-nwse, nwse-resize); touch-action: none; }
.cg-grip i { position: absolute; width: calc(2 * var(--u)); height: calc(2 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(255, 255, 255, .18); transition: background-color .3s; }
.cg-grip i:nth-child(1) { left: calc(6 * var(--u)); top: calc(2 * var(--u)); }
.cg-grip i:nth-child(2) { left: calc(2 * var(--u)); top: calc(6 * var(--u)); }
.cg-grip i:nth-child(3) { left: calc(6 * var(--u)); top: calc(6 * var(--u)); }
.cg-grip:hover i { background: rgba(255, 255, 255, .55); }

/* screen and background effects */

.cg-scrollwrap { position: relative; overflow-x: auto; overflow-y: hidden; border-radius: 18px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.cg-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 540px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: #0b0e18 url("img/backmenu.webp") center / cover;
  isolation: isolate;
}
.cg-screen > .cg-host { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.cg-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  isolation: isolate;
}
.cg-overlay.is-open { display: block; }
.cg-overlay > .cg-host { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }

.cg-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .25s cubic-bezier(.39, .58, .57, 1); }
.cg-fx.is-on { opacity: 1; }
.cg-fx > * { position: absolute; inset: 0; display: none; }
.cg-fx.e-gray .fx-gray, .cg-fx.e-blur .fx-blur, .cg-fx.e-dim .fx-dim, .cg-fx.e-rays .fx-rays, .cg-fx.e-dots .fx-dots,
.cg-fx.e-scan .fx-scan, .cg-fx.e-glow .fx-glow, .cg-fx.e-particles .fx-particles { display: block; }
.fx-gray { -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); }
.fx-blur { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.cg-screen .fx-blur, .cg-screen .cg-plate, .cg-screen .cg-panel, .cg-screen .cg-tip { -webkit-backdrop-filter: none; backdrop-filter: none; }
.cg-screen .fx-dots {
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, var(--hx, -9999px) var(--hy, 0);
  -webkit-mask-size: 100% 100%, var(--hw, 0) var(--hh, 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-position: 0 0, var(--hx, -9999px) var(--hy, 0);
  mask-size: 100% 100%, var(--hw, 0) var(--hh, 0);
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
.fx-dim { background: rgba(0, 0, 0, .7); }
.fx-dim::after { content: ""; position: absolute; inset: 0; background: rgb(var(--accent-rgb)); -webkit-mask: url("img/gui/dimtint.png") 0 0 / 100% 100% no-repeat; mask: url("img/gui/dimtint.png") 0 0 / 100% 100% no-repeat; }
.fx-rays {
  background:
    radial-gradient(ellipse 55% 75% at 74% -25%, rgba(var(--accent-rgb), .32), transparent 72%),
    radial-gradient(ellipse 40% 60% at 82% -40%, rgba(var(--accent-rgb), .22), transparent 70%),
    repeating-conic-gradient(from 188deg at 76% -48%, rgba(var(--accent-rgb), .08) 0deg 3deg, rgba(var(--accent-rgb), 0) 6deg 11deg, rgba(var(--accent-rgb), .08) 14deg);
  filter: blur(10px);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 86%);
  mask: linear-gradient(180deg, #000 0%, transparent 86%);
  mix-blend-mode: screen;
  inset: 0 -40px;
  will-change: transform;
  animation: fxRays 14s ease-in-out infinite alternate;
}
@keyframes fxRays { from { transform: translateX(-20px); } to { transform: translateX(20px); } }
.fx-dots {
  --g: 12px;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .1) 1.4px, transparent 1.9px),
    radial-gradient(circle, rgba(255, 255, 255, .1) 1.4px, transparent 1.9px);
  background-size: var(--g) calc(var(--g) * .866 * 2);
  background-position: 0 0, calc(var(--g) / 2) calc(var(--g) * .866);
}
.fx-dots::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .1) 4.5px, transparent 5px),
    radial-gradient(circle, rgba(255, 255, 255, .1) 4.5px, transparent 5px);
  background-size: inherit;
  background-position: inherit;
  -webkit-mask: radial-gradient(circle 200px at var(--mx, -999px) var(--my, -999px), #000, transparent);
  mask: radial-gradient(circle 200px at var(--mx, -999px) var(--my, -999px), #000, transparent);
}
.fx-scan { inset: -8px 0 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 8px); opacity: .18; will-change: transform; animation: fxScan 3s linear infinite; }
@keyframes fxScan { to { transform: translateY(8px); } }
.fx-glow i { position: absolute; inset: 0; opacity: .5; transition: transform .25s cubic-bezier(.39, .58, .57, 1); }
.fx-glow .g-circles { background: rgb(var(--accent-rgb)); -webkit-mask: url("img/gui/circles.png") 0 0 / 100% 100% no-repeat; mask: url("img/gui/circles.png") 0 0 / 100% 100% no-repeat; }
.fx-glow .g-dark { background: #000; -webkit-mask: url("img/gui/circles_dark.png") 0 0 / 100% 100% no-repeat; mask: url("img/gui/circles_dark.png") 0 0 / 100% 100% no-repeat; }
.fx-glow .g-top { background: rgb(var(--accent-rgb)); -webkit-mask: url("img/gui/topglow.png") 0 0 / 100% 100% no-repeat; mask: url("img/gui/topglow.png") 0 0 / 100% 100% no-repeat; }
.cg-fx:not(.is-on) .g-circles, .cg-fx:not(.is-on) .g-dark { transform: translateY(30px); }
.cg-fx:not(.is-on) .g-top { transform: translateY(-30px); }
.fx-pulse { display: block !important; inset: auto; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); transform: translate(-50%, -50%); opacity: 0; }
.cg-fx.e-glow.is-pulse .fx-pulse { animation: fxPulse .25s cubic-bezier(.39, .58, .57, 1); }
@keyframes fxPulse { 0% { width: 0; height: 0; opacity: 0; } 50% { opacity: 1; } 100% { width: 114vmax; height: 114vmax; opacity: 0; } }
.fx-particles { width: 100%; height: 100%; }

@media (max-width: 860px) {
  .cg-screen { width: 920px; min-height: 0; aspect-ratio: auto; height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-rays, .fx-scan { animation: none; }
}

/* wardrobe page (Modules/Cosmetics/WardrobePage.java) */

.cg-page.is-wardrobe { display: block; padding: 0; text-align: left; }
.cg-page.is-wardrobe > b, .cg-page.is-wardrobe > span { display: none; }
.cg-page:not(.is-wardrobe) > .wr { display: none; }
.wr { position: absolute; inset: 0; }
.wr button { font: inherit; }

.wr-chips { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(6 * var(--u)); height: calc(16 * var(--u)); display: flex; gap: calc(4 * var(--u)); overflow: hidden; }
.wr-chip {
  position: relative;
  flex: none;
  height: calc(16 * var(--u));
  padding: 0 calc(6 * var(--u));
  border: 0;
  border-radius: calc(5 * var(--u));
  background: rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0);
  font-size: calc(6.5 * var(--u)) !important;
  color: rgba(255, 255, 255, .75);
  white-space: nowrap;
  cursor: var(--cur-pointer, pointer);
  transition: all .3s ease-in-out;
}
.wr-chip:hover { background: rgba(var(--ar), .22); color: #fff; }
.wr-chip.is-on { background: rgba(var(--ar), .45); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(var(--ar)); color: #fff; }
.wr-chip i { position: absolute; right: calc(2 * var(--u)); top: calc(2 * var(--u)); width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: var(--c); }
.wr-chip--gear { width: calc(16 * var(--u)); padding: 0; display: grid; place-items: center; }
.wr-chip--gear .cg-ico { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }

.wr-model { position: absolute; left: calc(6 * var(--u)); top: calc(28 * var(--u)); bottom: calc(6 * var(--u)); width: calc(var(--mw) * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(0, 0, 0, .15); transition: width .3s ease-in-out; }
.wr-name { position: absolute; left: calc(5 * var(--u)); right: calc(5 * var(--u)); top: 0; height: calc(12 * var(--u)); display: flex; align-items: center; font-size: calc(6 * var(--u)); color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; }
.wr-view { position: absolute; left: calc(3 * var(--u)); right: calc(3 * var(--u)); top: calc(12 * var(--u)); bottom: calc(49 * var(--u)); border-radius: calc(4 * var(--u)); background: #0c101c; overflow: hidden; cursor: var(--cur-grab, grab); touch-action: pan-y; }
.wr-view:active { cursor: var(--cur-grabbing, grabbing); }
.wr-frame { position: absolute; left: 50%; top: 50%; width: var(--fs, 100%); height: var(--fs, 100%); transform: translate(-50%, -50%); background-repeat: no-repeat; pointer-events: none; }
.wr-spin { position: absolute; left: 50%; top: 50%; width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin: calc(-5 * var(--u)) 0 0 calc(-5 * var(--u)); border-radius: 50%; border: calc(1 * var(--u)) solid rgba(255, 255, 255, .12); border-top-color: rgb(var(--ar)); opacity: 0; transition: opacity .2s; animation: wrSpin .8s linear infinite; pointer-events: none; }
.wr-view.is-loading .wr-spin { opacity: 1; }
@keyframes wrSpin { to { transform: rotate(360deg); } }
.wr-btns { position: absolute; left: calc(3 * var(--u)); right: calc(3 * var(--u)); bottom: calc(3 * var(--u)); display: grid; gap: calc(5 * var(--u)); }
.wr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  height: calc(11 * var(--u));
  padding: 0 calc(6 * var(--u));
  border: 0;
  border-radius: calc(4 * var(--u));
  background: rgba(0, 0, 0, .25);
  font-size: calc(6 * var(--u)) !important;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  cursor: var(--cur-pointer, pointer);
  transition: all .3s ease-in-out;
}
.wr-btn:hover { background: rgba(var(--ar), .45); color: #fff; }
.wr-btn i { flex: none; width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: var(--c); }

.wr-grid { position: absolute; top: calc(28 * var(--u)); right: calc(6 * var(--u)); bottom: calc(72 * var(--u)); width: calc(var(--rw) * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(0, 0, 0, .15); overflow: hidden; }
.wr-scroll { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), calc(var(--cw) * var(--u))); gap: calc(4 * var(--u)); align-content: start; padding: calc(4 * var(--u)); overflow-y: auto; overscroll-behavior: contain; }
.wr-card {
  position: relative;
  display: block;
  width: calc(var(--cw) * var(--u));
  height: calc((var(--cw) + 12) * var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(5 * var(--u));
  background: #0c101c;
  overflow: hidden;
  cursor: var(--cur-pointer, pointer);
  text-align: center;
}
.wr-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), 0); background: rgba(255, 255, 255, 0); pointer-events: none; transition: all .3s ease-in-out; }
.wr-card:hover::after { background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), .5); }
.wr-card.is-on::after { background: rgba(var(--ar), .15); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--ar), .9); }
.wr-card__img { display: block; width: calc(var(--cw) * var(--u)); height: calc(var(--cw) * var(--u)); }
.wr-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wr-card__name { display: flex; align-items: center; justify-content: center; height: calc(12 * var(--u)); padding: 0 calc(3 * var(--u)); font-size: calc(5.5 * var(--u)); color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; }
.wr-card.is-on .wr-card__name { color: #fff; }
.wr-card__eq { position: absolute; right: calc(3 * var(--u)); top: calc(3 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: rgb(var(--ar)); z-index: 1; }
.wr-card__glow { position: absolute; left: calc(3 * var(--u)); top: calc(3 * var(--u)); width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: rgba(255, 216, 74, .8); z-index: 1; }

.wr-opts { position: absolute; right: calc(6 * var(--u)); bottom: calc(6 * var(--u)); width: calc(var(--rw) * var(--u)); height: calc(60 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(0, 0, 0, .15); }
.wr-o__title { position: absolute; left: calc(6 * var(--u)); right: calc(40 * var(--u)); top: calc(5 * var(--u)); font-weight: 400; font-size: calc(7 * var(--u)); color: #fff; white-space: nowrap; overflow: hidden; }
.wr-o__hint { position: absolute; left: calc(6 * var(--u)); right: calc(40 * var(--u)); top: calc(15 * var(--u)); font-size: calc(5.5 * var(--u)); color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20 * var(--u)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20 * var(--u)), transparent); }
.wr-o__hint--big { top: calc(18 * var(--u)); right: calc(6 * var(--u)); font-size: calc(6 * var(--u)); }
.wr-o__off { position: absolute; right: calc(6 * var(--u)); top: calc(5 * var(--u)); }
.wr-o__row { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(26 * var(--u)); height: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u)); overflow: hidden; }
.wr-o__label { flex: none; margin-right: calc(2 * var(--u)); font-size: calc(6 * var(--u)); color: rgba(255, 255, 255, .6); white-space: nowrap; }
.wr-pill { flex: none; height: calc(12 * var(--u)); padding: 0 calc(6 * var(--u)); border: 0; border-radius: calc(4 * var(--u)); background: rgba(0, 0, 0, .25); font-size: calc(6 * var(--u)) !important; color: rgba(255, 255, 255, .75); white-space: nowrap; cursor: var(--cur-pointer, pointer); transition: all .3s ease-in-out; }
.wr-pill:hover { background: rgba(var(--ar), .2); color: #fff; }
.wr-pill.is-on { background: rgba(var(--ar), .5); color: #fff; }
.wr-dot { position: relative; flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .15); cursor: var(--cur-pointer, pointer); transition: box-shadow .3s; }
.wr-dot::after { content: ""; position: absolute; inset: calc(1 * var(--u)); border-radius: 50%; background: var(--c); }
.wr-dot:hover { box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .6); }
.wr-dot.is-on { box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .9); }
.wr-o__sliders { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(42 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.wr-slider { position: relative; height: calc(12 * var(--u)); cursor: var(--cur-pointer, pointer); touch-action: none; }
.wr-slider span, .wr-slider b { position: absolute; top: 0; font-weight: 400; font-size: calc(5.5 * var(--u)); line-height: 1; }
.wr-slider span { left: 0; color: rgba(255, 255, 255, .6); }
.wr-slider b { right: 0; color: rgba(255, 255, 255, .8); }
.wr-slider i { position: absolute; left: 0; right: 0; top: calc(8.5 * var(--u)); height: calc(2 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(255, 255, 255, .15); }
.wr-slider em { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: rgba(var(--ar), .9); }
.wr-slider u { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); transition: width .15s, height .15s; }
.wr-slider:hover u { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }

.wr.is-settings .wr-grid { display: none; }
.wr.is-settings .wr-opts { top: calc(28 * var(--u)); height: auto; }
.wr.is-settings .wr-o__title { top: calc(6 * var(--u)); }
.wr-set__chips { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(20 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.wr-set__sliders { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(60 * var(--u)); display: grid; gap: calc(5 * var(--u)); }
.wr-set__sliders .wr-slider { height: calc(14 * var(--u)); }

.wr.is-full .wr-model { width: auto; right: calc(6 * var(--u)); }
.wr.is-full .wr-grid, .wr.is-full .wr-opts { display: none; }
.wr.is-full .wr-btns { left: auto; width: calc((var(--mw) - 6) * var(--u)); }