:root {
  --panel:16,17,21;
  --text:236,237,242;
  --dim:152,155,165;
  --faint:106,109,120;
  --white:255,255,255;
  --green:74,222,128;
  --amber:251,191,36;
  --red:248,113,113;
  --line:255,255,255;
  --accent:112,98,255;
  --accent2:86,168,255;
  --opacity:.75;
  --zoom:1;
  --fit:1;
  --font:"Segoe UI","SF Pro Text",system-ui,-apple-system,"Microsoft YaHei",Arial,sans-serif;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body {
  height:100%;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  background:#0a0b0f;
  overflow:hidden;
}

.scene {
  background:radial-gradient(60% 50% at 50% 20%,#46506e59,#0000 70%),radial-gradient(40% 40% at 80% 80%,#7062ff1f,#0000 70%),linear-gradient(#171a22,#0a0b0f 60%,#05060a);
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
  inset:0;
}

.scene:after {
  content:"";
  pointer-events:none;
  opacity:.5;
  background-image:repeating-linear-gradient(#ffffff05 0 1px,#0000 1px 3px);
  position:absolute;
  inset:0;
}

.stage {
  transform:scale(calc(var(--fit)*var(--zoom)));
  transform-origin:50%;
}

.win {
  background:rgba(var(--panel),var(--opacity));
  width:820px;
  height:630px;
  color:rgb(var(--text));
  will-change:opacity,transform;
  border-radius:10px;
  transition:opacity .22s,transform .22s;
  position:relative;
  box-shadow:0 0 0 1px #00000073,0 6px 40px 12px #00000047,0 2px 10px #00000080;
}

.win.closed {
  opacity:0;
  pointer-events:none;
  transform:scale(.97);
}

.win:before {
  content:"";
  background:rgba(var(--white),.06);
  pointer-events:none;
  border-radius:2px;
  height:1px;
  position:absolute;
  top:1px;
  left:14px;
  right:14px;
}

.topbar {
  background:rgba(var(--accent),.95);
  border-radius:10px 10px 1px 1px;
  height:2px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  overflow:hidden;
}

.topbar:after {
  content:"";
  background:rgba(var(--accent2),.55);
  position:absolute;
  inset:0 45% 0 0;
}

body.rainbow .topbar {
  background:linear-gradient(90deg,#ff5c5c,#ffa840,#fae248,#76f06e,#5ce8dc,#60acff,#b084ff,#ff78d6,#ff5c5c) 0 0/200% 100%;
  animation:3.4s linear infinite rainbowSlide;
}

@keyframes rainbowSlide {
  0% {
    background-position:0 0;
  }
  to {
    background-position:200% 0;
  }
}

.hdr {
  cursor:grab;
  height:62px;
  position:absolute;
  top:2px;
  left:0;
  right:0;
}

.hdr:active {
  cursor:grabbing;
}

.hdr .name {
  letter-spacing:.01em;
  font-size:15.5px;
  font-weight:700;
  position:absolute;
  top:14px;
  left:20px;
}

.hdr .sub {
  color:rgb(var(--faint));
  font-size:9.5px;
  position:absolute;
  top:35px;
  left:20px;
}

.hdr .keycap {
  background:rgba(var(--white),.07);
  min-width:34px;
  height:20px;
  box-shadow:inset 0 1px 0 rgba(var(--white),.05);
  color:rgb(var(--faint));
  letter-spacing:.06em;
  border-radius:5px;
  justify-content:center;
  align-items:center;
  padding:0 9px;
  font-size:9.5px;
  font-weight:700;
  display:flex;
  position:absolute;
  top:22px;
  right:54px;
}

.langbtn {
  background:rgba(var(--white),.07);
  height:20px;
  box-shadow:inset 0 1px 0 rgba(var(--white),.05);
  cursor:pointer;
  border:0;
  border-radius:5px;
  align-items:center;
  gap:1px;
  padding:2px;
  transition:background .15s;
  display:flex;
  position:absolute;
  top:22px;
  right:110px;
}

.langbtn .lg {
  min-width:22px;
  height:16px;
  font-family:var(--font);
  letter-spacing:.06em;
  color:rgb(var(--faint));
  border-radius:4px;
  justify-content:center;
  align-items:center;
  padding:0 5px;
  font-size:9px;
  font-weight:700;
  transition:background .15s,color .15s;
  display:flex;
}

.langbtn:hover .lg {
  color:rgb(var(--dim));
}

.langbtn .lg.on {
  background:rgba(var(--accent),.8);
  color:#fff;
}

.langbtn:active {
  transform:translateY(1px);
}

.hdr .close {
  width:24px;
  height:24px;
  color:rgb(var(--faint));
  cursor:pointer;
  background:0 0;
  border:0;
  border-radius:5px;
  justify-content:center;
  align-items:center;
  transition:background .15s,color .15s;
  display:flex;
  position:absolute;
  top:19px;
  right:16px;
}

.hdr .close:hover {
  background:rgba(var(--red),.16);
  color:rgb(var(--red));
}

.hdr .close svg {
  width:10px;
  height:10px;
}

.hdr-line {
  background:rgba(var(--white),.063);
  height:1px;
  position:absolute;
  top:64px;
  left:0;
  right:0;
}

.side {
  background:rgba(var(--white),.02);
  border-right:1px solid rgba(var(--white),.057);
  width:206px;
  position:absolute;
  top:64px;
  bottom:34px;
  left:0;
  overflow:hidden;
}

.tabs {
  flex-direction:column;
  gap:1px;
  display:flex;
  position:absolute;
  top:14px;
  left:0;
  right:0;
}

.tab {
  height:33px;
  color:rgb(var(--dim));
  font:inherit;
  text-align:left;
  cursor:pointer;
  background:0 0;
  border:0;
  border-radius:6px;
  align-items:center;
  gap:9px;
  margin:0 8px;
  padding:0 13px;
  font-size:12px;
  transition:background .16s,color .16s;
  display:flex;
  position:relative;
}

.tab svg {
  width:11px;
  height:11px;
  color:rgb(var(--faint));
  flex:none;
  transition:color .16s;
}

.tab:hover {
  background:rgba(var(--white),.04);
}

.tab.sel {
  background:rgba(var(--accent),.12);
  color:#fff;
  font-weight:700;
}

.tab.sel svg {
  color:rgb(var(--accent));
}

.tab.sel:before {
  content:"";
  background:rgb(var(--accent));
  border-radius:1px;
  width:2px;
  height:17px;
  position:absolute;
  top:50%;
  left:1px;
  transform:translateY(-50%);
}

body.no-icons .tab svg {
  display:none;
}

.acct {
  border-top:1px solid rgba(var(--white),.045);
  height:48px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

.acct .cap {
  letter-spacing:.14em;
  color:rgb(var(--faint));
  font-size:8.5px;
  font-weight:700;
  position:absolute;
  top:8px;
  left:16px;
}

.acct .user {
  color:rgb(var(--dim));
  font-size:11.5px;
  font-weight:700;
  position:absolute;
  top:21px;
  left:16px;
}

.acct .ver {
  color:rgb(var(--faint));
  font-size:9.5px;
  position:absolute;
  top:21px;
  right:16px;
}

.view {
  height:532px;
  position:absolute;
  top:64px;
  left:206px;
  right:0;
  overflow:hidden;
}

.paper {
  will-change:transform;
  width:566px;
  position:absolute;
  top:20px;
  left:22px;
}

.page-title {
  font-size:17.5px;
  font-weight:700;
  line-height:20px;
}

.page-desc {
  color:rgb(var(--faint));
  margin-top:3px;
  font-size:10.5px;
  line-height:14px;
}

.page-desc:empty {
  display:none;
}

.page-line {
  background:rgba(var(--white),.063);
  height:1px;
  margin-top:9px;
}

.rows {
  margin-top:14px;
}

.scrollbar {
  background:rgba(var(--white),.18);
  opacity:0;
  border-radius:1px;
  width:2px;
  transition:opacity .2s;
  position:absolute;
  top:8px;
  right:6px;
}

.view.scrolling .scrollbar {
  opacity:1;
}

.row {
  cursor:pointer;
  border-radius:6px;
  transition:background .14s;
  position:relative;
}

.row:hover {
  background:rgba(var(--white),.035);
}

.row.plain {
  cursor:default;
}

.row.plain:hover {
  background:0 0;
}

.row.toggle .label {
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12.5px;
  font-weight:700;
  line-height:22px;
  position:absolute;
  left:0;
  right:40px;
  overflow:hidden;
}

.row.toggle.has-desc .label {
  top:2px;
  right:40px;
}

.row.toggle .desc {
  height:18px;
  color:rgb(var(--faint));
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9.8px;
  line-height:18px;
  position:absolute;
  top:23px;
  left:0;
  right:40px;
  overflow:hidden;
}

.row.toggle .label.center {
  line-height:18px;
  top:50%;
  transform:translateY(-50%);
}

.tgl {
  background:rgba(var(--white),.063);
  border-radius:4px;
  justify-content:center;
  align-items:center;
  width:17px;
  height:17px;
  transition:background .18s;
  display:flex;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

.tgl svg {
  color:#fff;
  opacity:0;
  width:9.5px;
  height:9.5px;
  transition:opacity .18s;
}

.row.on .tgl {
  background:rgb(var(--accent));
}

.row.on .tgl svg {
  opacity:1;
}

body.no-icons .tgl svg {
  display:none;
}

.row.slider {
  cursor:default;
}

.row.slider .label {
  font-size:12.5px;
  line-height:26px;
}

.row.slider .val {
  color:rgb(var(--faint));
  font-size:11.5px;
  font-weight:700;
  line-height:26px;
  transition:color .15s;
  position:absolute;
  top:0;
  right:0;
}

.row.slider:hover .val {
  color:rgb(var(--dim));
}

.row.slider.drag .val {
  color:rgb(var(--accent));
}

.track {
  background:rgba(var(--white),.12);
  border-radius:1.5px;
  height:3px;
  position:absolute;
  bottom:8px;
  left:6px;
  right:6px;
}

.track .fill {
  background:rgba(var(--accent),.95);
  border-radius:1.5px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
}

.knob {
  width:6px;
  height:6px;
  box-shadow:0 0 0 2px rgba(var(--accent),.16);
  background:#fff;
  border-radius:50%;
  margin:-3px 0 0 -3px;
  transition:box-shadow .15s;
  position:absolute;
  top:50%;
}

.row.slider:hover .knob {
  box-shadow:0 0 0 2px rgba(var(--accent),.24);
}

.row.slider.drag .knob {
  box-shadow:0 0 0 2px rgba(var(--accent),.38);
}

.row.combo .label {
  font-size:12.5px;
  line-height:100%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.row.combo .val {
  color:rgb(var(--dim));
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:55%;
  font-size:11.5px;
  font-weight:700;
  position:absolute;
  top:50%;
  right:19px;
  overflow:hidden;
  transform:translateY(-50%);
}

.row.combo .caret {
  width:9px;
  height:9px;
  color:rgb(var(--faint));
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

body.no-icons .row.combo .caret {
  display:none;
}

body.no-icons .row.combo .val {
  right:4px;
}

.btn {
  background:rgba(var(--white),.035);
  color:rgb(var(--text));
  font:inherit;
  cursor:pointer;
  border:0;
  border-radius:6px;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:100%;
  font-size:12px;
  font-weight:700;
  transition:background .15s,transform 80ms;
  display:flex;
  position:relative;
}

.btn:hover {
  background:rgba(var(--white),.085);
}

.btn:active {
  transform:translateY(1px);
}

.btn svg {
  width:11px;
  height:11px;
  color:rgb(var(--faint));
}

.btn.accent {
  background:rgba(var(--accent),.88);
  color:#fff;
}

.btn.accent svg {
  color:#fff;
}

.btn.accent:hover {
  background:rgb(var(--accent));
}

.btn.danger {
  background:rgba(var(--red),.086);
  color:rgb(var(--red));
}

.btn.danger svg {
  color:rgb(var(--red));
}

.btn.danger:hover {
  background:rgba(var(--red),.16);
}

body.no-icons .btn svg {
  display:none;
}

.btnrow {
  gap:10px;
  height:100%;
  display:flex;
}

.btnrow .btn {
  flex:1 1 0;
  min-width:0;
}

.flexbox {
  align-items:center;
  gap:10px;
  display:flex;
}

.field {
  min-width:0;
  height:100%;
  position:relative;
}

.field input {
  width:100%;
  color:rgb(var(--text));
  font:inherit;
  caret-color:rgb(var(--accent));
  background:0 0;
  border:0;
  outline:0;
  font-size:12px;
  position:absolute;
  inset:3px 0 4px;
}

.field .flab {
  color:rgb(var(--faint));
  z-index:1;
  font-size:9px;
  position:absolute;
  top:-2px;
  left:0;
}

.field .uline {
  background:rgba(var(--white),.118);
  height:1.2px;
  transition:background .18s;
  position:absolute;
  bottom:3px;
  left:0;
  right:0;
}

.field.focus .uline {
  background:rgb(var(--accent));
}

.cloth {
  flex-direction:column;
  gap:2px;
  display:flex;
}

.clothrow {
  align-items:center;
  gap:8px;
  display:flex;
}

.clothrow .nm {
  width:62px;
  color:rgb(var(--faint));
  white-space:nowrap;
  text-overflow:ellipsis;
  flex:none;
  font-size:10px;
  overflow:hidden;
}

.clothrow .field {
  flex:1 1 0;
}

.row.keybind .label {
  font-size:12.5px;
  line-height:100%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.keycap {
  background:rgba(var(--white),.07);
  min-width:34px;
  height:21px;
  box-shadow:inset 0 1px 0 rgba(var(--white),.05);
  color:rgb(var(--dim));
  border-radius:5px;
  justify-content:center;
  align-items:center;
  padding:0 9px;
  font-size:10.5px;
  font-weight:700;
  display:flex;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

.row.keybind.listen .keycap {
  background:rgba(var(--accent),.18);
  color:rgb(var(--accent));
  animation:1s ease-in-out infinite keyPulse;
}

@keyframes keyPulse {
  0%,to {
    background:rgba(var(--accent),.18);
  }
  50% {
    background:rgba(var(--accent),.3);
  }
}

.row.textbox .lab {
  color:rgb(var(--faint));
  font-size:10px;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
}

.row.textbox input {
  width:calc(100% - 46px);
  color:rgb(var(--text));
  font:inherit;
  caret-color:rgb(var(--accent));
  background:0 0;
  border:0;
  outline:0;
  font-size:12.5px;
  position:absolute;
  inset:0 0 4px 46px;
}

.row.textbox .uline {
  background:rgba(var(--white),.118);
  height:1.2px;
  transition:background .18s;
  position:absolute;
  bottom:3px;
  left:0;
  right:0;
}

.row.textbox.focus .uline {
  background:rgb(var(--accent));
}

.row.info .label {
  color:rgb(var(--faint));
  font-size:10.5px;
  line-height:100%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.row.info .right {
  color:rgb(var(--dim));
  font-size:10.5px;
  font-weight:700;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

.row.item .ic {
  width:10.5px;
  height:10.5px;
  color:rgb(var(--faint));
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
}

.row.item .label {
  font-size:12px;
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%);
}

.row.item .right {
  color:rgb(var(--faint));
  font-size:10px;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

.row.item:hover .ic {
  color:rgb(var(--accent));
}

body.no-icons .row.item .label {
  left:0;
}

body.no-icons .row.item .ic {
  display:none;
}

.section {
  pointer-events:none;
  align-items:center;
  gap:0;
  height:17px;
  margin-top:14px;
  margin-bottom:6px;
  display:flex;
  position:relative;
}

.section svg {
  width:9.5px;
  height:9.5px;
  color:rgb(var(--faint));
  margin-right:6px;
}

.section .cap {
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgb(var(--dim));
  font-size:9.8px;
  font-weight:700;
}

.section .rule {
  background:rgba(var(--white),.063);
  flex:1;
  height:1px;
  margin-left:12px;
}

body.no-icons .section svg {
  display:none;
}

.hero {
  background:rgba(var(--white),.02);
  height:88px;
  box-shadow:inset 0 1px 0 rgba(var(--white),.05);
  cursor:default;
  border-radius:8px;
  position:relative;
}

.hero:before {
  content:"";
  background:rgba(var(--accent),.9);
  border-radius:1px;
  width:2px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
}

.hero .n {
  font-size:20px;
  font-weight:700;
  position:absolute;
  top:14px;
  left:18px;
}

.hero .s {
  color:rgb(var(--faint));
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:9.8px;
  position:absolute;
  top:40px;
  left:18px;
}

.hero .badges {
  gap:6px;
  display:flex;
  position:absolute;
  top:58px;
  left:18px;
}

.badge {
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:4px;
  align-items:center;
  gap:5px;
  height:19px;
  padding:0 9px;
  font-size:9.5px;
  font-weight:700;
  display:inline-flex;
}

.badge svg {
  width:9.5px;
  height:9.5px;
}

.badge.a {
  background:rgba(var(--accent),.14);
  color:rgb(var(--accent));
}

.badge.b {
  background:rgba(var(--accent2),.14);
  color:rgb(var(--accent2));
}

.badge.g {
  background:rgba(var(--green),.14);
  color:rgb(var(--green));
}

body.no-icons .badge svg {
  display:none;
}

.pal .lab {
  color:rgb(var(--text));
  font-size:11px;
  line-height:13px;
}

.pal .cells {
  grid-template-columns:repeat(6,1fr);
  gap:3px 2px;
  display:grid;
  position:absolute;
  top:15px;
  left:0;
  right:0;
}

.pal .cell {
  cursor:pointer;
  border-radius:3px;
  height:16px;
  position:relative;
}

.pal .cell.on:before {
  content:"";
  background:rgba(var(--white),.95);
  height:1.8px;
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
}

.pal .cell.on:after {
  content:"";
  background:rgba(var(--white),.95);
  height:1.8px;
  position:absolute;
  bottom:-1px;
  left:-1px;
  right:-1px;
}

.twocol {
  gap:16px;
  display:flex;
  position:relative;
}

.twocol .col {
  width:275px;
  position:relative;
}

.twocol .divider {
  background:rgba(var(--white),.063);
  width:1px;
  position:absolute;
  top:0;
  left:283px;
}

.row.chat {
  cursor:default;
  align-items:center;
  gap:8px;
  font-size:11px;
  display:flex;
}

.row.chat .t {
  color:rgb(var(--faint));
  flex:none;
  font-size:9.5px;
}

.row.chat .n {
  color:rgb(var(--dim));
  flex:none;
  font-size:11px;
  font-weight:700;
}

.row.chat .b {
  color:rgb(var(--dim));
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:11px;
  overflow:hidden;
}

.row.chat.me .n {
  color:rgb(var(--accent2));
}

.row.chat.me .b {
  color:rgb(var(--text));
}

.foot {
  border-top:1px solid rgba(var(--white),.045);
  height:34px;
  color:rgb(var(--faint));
  font-size:9.5px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

.foot .l {
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%);
}

.foot .r {
  position:absolute;
  top:50%;
  right:20px;
  transform:translateY(-50%);
}

.dropdown {
  z-index:40;
  box-shadow:0 0 0 1px #0006,0 10px 30px #00000080,inset 0 1px 0 rgba(var(--white),.06);
  scrollbar-width:thin;
  background:#16171cd9;
  border-radius:7px;
  max-height:260px;
  padding:4px 0;
  position:absolute;
  overflow-y:auto;
}

.dropdown::-webkit-scrollbar {
  width:2px;
}

.dropdown::-webkit-scrollbar-thumb {
  background:rgba(var(--accent),.55);
}

.dd-item {
  height:29px;
  color:rgb(var(--dim));
  cursor:pointer;
  white-space:nowrap;
  text-overflow:ellipsis;
  align-items:center;
  padding:0 13px;
  font-size:11.5px;
  display:flex;
  position:relative;
  overflow:hidden;
}

.dd-item:hover {
  background:rgba(var(--white),.06);
  color:rgb(var(--text));
}

.dd-item.sel {
  color:rgb(var(--text));
  font-weight:700;
}

.dd-item.sel:before {
  content:"";
  background:rgb(var(--accent));
  border-radius:1px;
  width:2px;
  position:absolute;
  top:7px;
  bottom:7px;
  left:5px;
}

.toasts {
  z-index:60;
  pointer-events:none;
  flex-direction:column-reverse;
  gap:6px;
  width:272px;
  display:flex;
  position:absolute;
  bottom:22px;
  right:24px;
}

.toast {
  height:50px;
  box-shadow:0 0 0 1px rgba(var(--white),.06),0 12px 26px #00000073;
  background:#16171ce6;
  border-radius:8px;
  flex-direction:column;
  justify-content:center;
  padding:0 14px;
  animation:.22s both toastIn;
  display:flex;
  overflow:hidden;
}

.toast.out {
  animation:.2s both toastOut;
}

.toast .tt {
  color:rgb(var(--text));
  font-size:11.5px;
  font-weight:700;
}

.toast .td {
  color:rgb(var(--faint));
  white-space:nowrap;
  text-overflow:ellipsis;
  margin-top:2px;
  font-size:9.5px;
  overflow:hidden;
}

.toast .bar {
  background:rgb(var(--accent));
  width:2px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
}

.toast.ok .bar {
  background:rgb(var(--green));
}

.toast.warn .bar {
  background:rgb(var(--amber));
}

.toast.err .bar {
  background:rgb(var(--red));
}

@keyframes toastIn {
  0% {
    opacity:0;
    transform:translate(16px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes toastOut {
  0% {
    opacity:1;
  }
  to {
    opacity:0;
    transform:translate(16px);
  }
}

.debug {
  color:#9ad0ff;
  z-index:100;
  background:#00000080;
  border-radius:6px;
  padding:8px 10px;
  font:11px/1.5 ui-monospace,Consolas,monospace;
  display:none;
  position:fixed;
  top:12px;
  left:12px;
}

body.debug-on .debug {
  display:block;
}

.hint {
  letter-spacing:.18em;
  color:#ebf0fa73;
  text-transform:uppercase;
  pointer-events:none;
  font-size:12px;
  display:none;
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%);
}

body.win-closed .hint,.scene {
  display:block;
}

.stage {
  width:100%;
  transform:none;
}

.win {
  width:100%;
  height:630px;
  box-shadow:none;
  border-radius:0;
}

.paper {
  width:calc(100% - 44px);
}

.hint {
  cursor:pointer;
  pointer-events:auto;
  bottom:24px;
}

.tabs {
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#46444f #15151c;
  bottom:52px;
  overflow-y:auto;
}

.tabs::-webkit-scrollbar {
  width:4px;
  height:4px;
}

.tabs::-webkit-scrollbar-track {
  background:#15151c;
}

.tabs::-webkit-scrollbar-thumb {
  background:#46444f;
  border-radius:4px;
}

.tabs::-webkit-scrollbar-thumb:hover {
  background:#696575;
}

.tabs::-webkit-scrollbar-corner {
  background:#15151c;
}

.tabs .tab {
  flex-shrink:0;
}

.row.slider {
  touch-action:pan-y;
}

.dropdown {
  overscroll-behavior:contain;
  overflow-y:auto;
}

@media (width<=650px) {
  .win {
    height:684px;
  }
  .side {
    border-right:0;
    border-bottom:1px solid rgba(var(--white),.05);
    width:auto;
    height:54px;
    top:64px;
    left:0;
    right:0;
  }
  .tabs {
    flex-direction:row;
    gap:4px;
    padding:0 8px;
    top:7px;
    bottom:7px;
    overflow:auto hidden;
  }
  .tab {
    white-space:nowrap;
    height:38px;
    margin:0;
    padding:0 12px;
  }
  .acct {
    display:none;
  }
  .view {
    height:532px;
    top:118px;
    left:0;
  }
  .paper {
    width:calc(100% - 32px);
    left:16px;
  }
  .twocol {
    flex-direction:column;
  }
  .twocol .col {
    flex:none;
    width:100%;
    min-width:0;
  }
  .twocol .divider {
    display:none;
  }
  .btnrow {
    gap:6px;
  }
  .btn {
    padding:0 4px;
    font-size:11px;
  }
  .row.combo .label {
    max-width:48%;
    line-height:1.3;
  }
  .row .desc {
    white-space:normal;
  }
  .row.has-desc {
    min-height:56px;
  }
  .foot .l {
    font-size:8px;
  }
}