/* ---------- chrome ---------- */
#hint{position:fixed;bottom:26px;right:28px;z-index:10;font-size:11.5px;
  color:var(--tx-3);transition:opacity .6s ease;padding:10px 16px;border-radius:12px;
  border:.5px solid var(--chip-line);background:var(--chip);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.fade{opacity:0!important;pointer-events:none}

/* ---------- menu ----------
   One button instead of six. The six sat permanently in front of the thing they
   exist to operate on, and they wanted the same corner as the search box. */
#topleft{position:fixed;top:24px;left:24px;z-index:31;
  display:flex;align-items:flex-start;gap:10px}

#menubtn{width:38px;height:38px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  border:.5px solid var(--panel-line);background:var(--panel-bg);
  background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  box-shadow:var(--panel-shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:background .3s}
#menubtn:hover{background:var(--hover)}
#menubtn span{display:block;width:15px;height:1.5px;border-radius:2px;
  background:var(--tx-2);
  transition:transform .34s cubic-bezier(.32,.72,0,1),opacity .22s ease}
/* the three bars fold into a cross, so the button says what it will do next */
#menubtn.on span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
#menubtn.on span:nth-child(2){opacity:0}
#menubtn.on span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

#bar{position:fixed;top:70px;left:24px;z-index:30;width:214px;padding:8px;
  border-radius:16px;border:.5px solid var(--panel-line);
  background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--glass-top);
  opacity:0;pointer-events:none;transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  transition:opacity .26s ease,transform .3s cubic-bezier(.32,.72,0,1)}
#bar.on{opacity:1;pointer-events:auto;transform:none}

#bar .mgroup{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--tx-3);padding:9px 10px 5px}
#bar .mgroup:first-child{padding-top:5px}
#bar .mrow{display:flex;align-items:center;gap:11px;padding:9px 10px;
  border-radius:10px;cursor:pointer;color:var(--tx-2);
  transition:background .2s ease,color .2s ease}
#bar .mrow:hover{background:var(--hover);color:var(--tx)}
/* Still centres a single text glyph exactly as before; inline-flex additionally
   lets one row (graphing tool) carry a small SVG in its place, coloured by
   `currentColor` so it inherits .mrow's colour/hover state for free instead of
   needing a light/dark pair of its own. */
#bar .mi{width:17px;height:17px;display:inline-flex;align-items:center;
  justify-content:center;text-align:center;font-size:14px;flex:0 0 auto}
#bar .mi svg{display:block}
#bar .ml{font-size:13.5px;white-space:nowrap}