.gx{position:relative; flex:none}
.gx.gx-push{margin-right:auto}
.gx-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit;
  font-size:13px; font-weight:560; color:var(--t2);
  padding:6px 9px; border:1px solid var(--line); border-radius:20px; background:var(--s1);
  transition:border-color .14s, color .14s, background .14s;
}
.gx-btn:hover,.gx.on .gx-btn{color:var(--t1); border-color:#4a4a58; background:var(--s2)}
.gx-caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:4.5px solid currentColor; opacity:.6; transition:transform .18s var(--ease);
}
.gx.on .gx-caret{transform:rotate(180deg)}

.gx-pop{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:min(298px,86vw);
  padding:11px; border:1px solid var(--line); border-radius:12px; background:var(--s1);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  animation:gxin .16s var(--ease) both;
}
@keyframes gxin{from{opacity:0; transform:translateY(-5px)}}
.gx-h{
  margin:2px 4px 9px; font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--t3);
}
.gx-list{display:grid; gap:3px}
.gx-item{
  display:grid; grid-template-columns:26px minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:9px; align-items:center; text-decoration:none;
  padding:9px 10px; border-radius:8px; border:1px solid transparent; color:var(--t1);
}
.gx-item i{grid-row:1/3; font-style:normal; font-size:17px; text-align:center; line-height:1}
.gx-item b{font-size:13.5px; font-weight:620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gx-item small{font-size:11px; color:var(--t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.gx-item:hover{background:var(--s2); border-color:var(--line)}
.gx-item.here{background:var(--s2); border-color:var(--line); cursor:default}
.gx-item.here small{color:var(--hi)}
.gx-home{
  display:block; margin:0 0 8px; padding:9px 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--s2);
  font-size:12.5px; font-weight:600; color:var(--t1); text-decoration:none;
}
.gx-home:hover{border-color:#4a4a58; background:var(--s3)}

.gx-ico{font-size:14px; line-height:1}
@media (max-width:640px){
  .gx-btn{padding:6px 8px; gap:5px}
  .gx-now{display:none}
}

.gicono{
  display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em;
  flex:none; overflow:visible;
}
.gicono-txt{
  width:auto; height:auto; font-style:normal; line-height:1; vertical-align:baseline;
}
.gicono-lg{width:1.05em; height:1.05em; vertical-align:-.12em}
.lb-chip .gicono{width:1em; height:1em; vertical-align:-.15em}
.lbp-emoji .gicono{width:19px; height:19px; vertical-align:middle}
.gx-ico .gicono{width:15px; height:15px; vertical-align:-.2em}
.lb-tabs i .gicono{width:14px; height:14px; vertical-align:-.15em}

.cafecito{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  color:var(--mid,#e6b73f); text-decoration:none;
}
.cafecito:hover{text-decoration:underline}
.cafecito svg{width:13px; height:13px; flex:none}

.cafecard{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin:22px auto 0; max-width:640px; padding:14px 16px;
  border:1px solid #4d3d15; border-radius:var(--r,9px); background:#1a1508;
}
.cafecard-t{flex:1 1 240px; display:grid; gap:3px; min-width:0}
.cafecard-t b{font-size:14px; font-weight:620; color:var(--t1,#f4f3f7)}
.cafecard-t small{font-size:12.5px; color:var(--t3,#6b7183); line-height:1.45}
.btn-cafe{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  border-color:#6b5518 !important; background:var(--mid,#e6b73f) !important;
  color:#1a1508 !important; text-decoration:none; font-weight:600;
}
.btn-cafe:hover{filter:brightness(1.07)}
.btn-cafe svg{width:15px; height:15px; flex:none}
@media (max-width:520px){
  .cafecard{flex-direction:column; align-items:stretch; text-align:left}
  .btn-cafe{justify-content:center}
}

.gi{
  position:relative; display:inline-flex; flex:none; align-items:stretch;
  padding:3px; border:1px solid var(--line); border-radius:99px;
  background:var(--s1); isolation:isolate;
}
.gi-ind{
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px;
  width:calc(50% - 3px); border-radius:99px;
  background:var(--paper,#eef3f7); box-shadow:0 1px 4px rgba(0,0,0,.32);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.gi.en .gi-ind{transform:translateX(100%)}
.gi-b{
  position:relative; z-index:1; flex:1 1 50%; text-align:center;
  border:0; background:none; cursor:pointer; font:inherit;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:10.5px; font-weight:660; letter-spacing:.07em;
  padding:5px 10px; border-radius:99px; color:var(--t3);
  transition:color .22s;
}
.gi-b:hover{color:var(--t2)}
.gi-b[aria-checked="true"]{color:var(--ink,#101218)}
.gi-b:focus-visible{outline:2px solid var(--hi); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .gi-ind{transition:none} }
@media (max-width:640px){
  .gi{padding:2px}
  .gi-ind{top:2px; bottom:2px; left:2px; width:calc(50% - 2px)}
  .gi-b{padding:5px 8px; font-size:10px; letter-spacing:.05em}
}

.gx-casa{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px 6px 9px; border:1px solid var(--line); border-radius:99px;
  background:var(--s1); color:var(--t2); text-decoration:none;
  font-size:12.5px; font-weight:560; white-space:nowrap;
  transition:color .14s, border-color .14s, background .14s;
}
.gx-casa:hover{color:var(--t1); border-color:#4a4a58; background:var(--s2)}
.gx-casa svg{width:15px; height:15px; flex:none}
@media (max-width:820px){
  .gx-casa span{display:none}
  .gx-casa{padding:6px 8px}
}